웹 개발

공들여 만든 페이지가 몇 주째 검색 결과에 보이지 않는다 — 작은 회사 웹사이트가 검색엔진 수집(사이트맵·robots.txt)을 챙기는 5가지 원칙

페이지를 잘 만들어도 검색엔진이 찾지 못하면 없는 것과 같다. 사이트맵과 robots.txt로 우리 사이트를 빠짐없이 수집되게 만드는 다섯 가지 원칙을 정리했다.

2026.06.14 조회 11
트렌드

사진이 뒤늦게 뜨며 화면이 덜컹 밀려 손님이 엉뚱한 버튼을 누른다 — aspect-ratio가 코드 한 줄로 자리를 미리 잡는 시대

이미지가 늦게 로딩되면 화면이 아래로 밀려 손님이 누르려던 버튼이 어긋납니다. CSS aspect-ratio 한 줄로 사진이 들어올 자리를 미리 비워 두어, 화면이 흔들리지 않게 만드는 방법을 정리했습니다.

2026.06.14 조회 11
프로젝트 후기

말총 한 올이 머리카락보다 가늘게 천 번 엮여 빛이 드는 그늘이 된다 — 그늘결(笠結) 갓 공방 브랜드 사이트 제작기

사십 년 말총을 엮어온 손은 있었지만 검색창엔 한 줄도 없던 갓 공방. 만드는 과정의 깊이를 그대로 보여주는 브랜드 사이트로 '그늘결'을 세운 이야기.

2026.06.14 조회 11
트렌드

안내창 하나 띄우자고 모달 라이브러리를 통째로 설치한다 — HTML dialog 태그가 코드 몇 줄로 진짜 팝업을 띄우는 시대

팝업 하나 띄우려고 무거운 자바스크립트 라이브러리를 설치하던 시대가 저물고 있습니다. 브라우저에 기본 내장된 dialog 태그로 가볍고 안전한 팝업을 만드는 원리와, 작은 회사 웹사이트에 주는 실질적 이득을 정리했습니다.

2026.06.14 조회 10
비즈니스

옆 가게 홈페이지를 그대로 따라 만들었는데 우리 업종에선 문의가 한 통도 없다 — 작은 회사가 업종에 맞춰 홈페이지 우선순위를 정하는 5가지 기준

같은 홈페이지 공식이 모든 업종에 통하지는 않습니다. 고객이 결정 직전에 확인하는 정보는 업종마다 다르며, 그 정보를 첫 화면에 두었는지가 문의 수를 가릅니다.

2026.06.13 조회 14
디자인

PC 화면에선 멀쩡하던 사이트가 손님 휴대폰에선 글자가 잘리고 버튼이 겹친다 — 작은 회사 웹사이트 모바일 화면(반응형) 설계의 5가지 원칙

작은 회사 웹사이트를 찾는 손님 열에 일곱은 휴대폰으로 들어옵니다. PC 화면만 보고 만든 사이트가 모바일에서 어떻게 손님을 놓치는지, 다섯 가지 원칙으로 짚어 봅니다.

2026.06.13 조회 16
트렌드

미디어 쿼리로 화면 너비만 재다 보니 같은 카드가 사이드바에선 깨진다 — 컨테이너 쿼리(@container)가 부모 크기에 맞춰 부품을 반응시키는 시대

반응형의 기준을 '화면'이 아니라 '부모 영역'으로 옮기는 CSS 컨테이너 쿼리. 같은 컴포넌트를 어디에 놓아도 알아서 모양을 바꾸는 원리와, 작은 회사 웹사이트에 주는 실질적 이득을 정리했습니다.

2026.06.13 조회 15
웹 개발

주소창에 자물쇠 대신 '주의 요함'이 떠 손님이 결제 직전에 창을 닫는다 — 작은 회사 웹사이트가 보안 자물쇠(HTTPS)를 갖추는 5가지 원칙

주소창의 '주의 요함' 경고 하나가 멀쩡한 가게를 사기 사이트처럼 보이게 만든다. 작은 회사가 무료 인증서로 HTTPS를 제대로 갖추는 5가지 실무 원칙을 정리했다.

2026.06.13 조회 13
웹 개발

카카오톡에 가게 링크를 보냈는데 제목도 사진도 없이 주소만 덩그러니 뜬다 — 작은 회사 웹사이트가 공유 미리보기(오픈그래프)를 갖추는 5가지 원칙

링크를 공유하면 카카오톡과 인스타에는 자동으로 뜨는 제목과 사진이 있습니다. 이 미리보기를 결정하는 오픈그래프 태그를 작은 회사가 제대로 챙기는 5가지 원칙을 정리했습니다.

2026.06.12 조회 16