웹사이트 메인 페이지를 처음부터 완성하기까지 네 번을 갈아엎었습니다. 매번 실패한 이유를 기록해두면 다음 프로젝트에서 같은 실수를 피할 수 있습니다. 이 글은 사용자 타겟팅부터 시각 설계, 글귀 선택까지 웹사이트를 제대로 만드는 순서를 정리한 것입니다.
타겟 고객을 좁혀야 디자인이 보인다
처음엔 막연했습니다. 기능만 늘어놓으면 된다고 생각했거든요. 손님을 명확히 정하는 순간 달라졌습니다.
‘온라인으로 물건 파는 1인 사장’으로 타겟을 정했습니다. 스마트스토어, 쿠팡 셀러, 자사몰을 운영하는 사람들입니다.
대상이 정해지니 색상, 사진, 글자 크기가 자연스럽게 결정됐습니다. 그 전까지는 모든 선택이 추상적이었거든요.
비슷해 보이는 레이아웃은 버려야 한다
첫 번째 실패입니다.
같은 템플릿에 글자만 바꿔서 ‘세 가지 버전’이라고 제시했어요. 색도 카드 모양도 전부 똑같았습니다. 의뢰인은 한눈에 알아챘습니다. “다 비슷하네요.”
비교할 수 있어야 선택이 됩니다. 내용만 다른 건 선택지가 아니라 복제본입니다.
움직임이 부족해 보이면 웹이 답답하게 느껴진다
두 번째 실패입니다.
지적을 받았습니다. 화면이 너무 정적이라고요.
캔버스로 그물망 애니메이션과 채널별 타이핑 데모를 넣었습니다. 스크롤할 때 나타나는 숫자 세기, 막대 차오르기, 사진 패럴랙스까지 더했어요.
다만 네 가지만 씁니다. 그 이상이면 오히려 AI가 만든 느낌이 납니다.
어두운 화면은 사용자를 멀어지게 한다
세 번째 실패입니다.
개발자 눈에는 멋있었습니다. 하지만 밤에 택배를 싸는 사장님 입장에선 어려운 도구처럼 보였어요. 접었습니다.
만드는 사람의 감각과 쓰는 사람의 경험은 다릅니다.
사진은 제품이 아닌 작업 장면을 담아야 한다
네 번째 실패입니다.
처음엔 포장, 상품 촬영 위주 사진을 넣었어요. 그러니 쇼핑몰처럼 보였습니다. 글을 쓰는 장면으로 다시 뽑았습니다.
사진 7장을 새로 준비했고 노트북, 수첩, 만년필, 커피로 소품을 통일했어요. 전부 합쳐 980KB로 줄였습니다.
사진이 무거우면 첫 화면이 늦게 뜹니다.
글씨 크기와 줄간격은 사용자 나이를 고려한다
본문을 18px, 줄간격 2.02로 키웠습니다. 사장님들 연령대를 생각하면 작게 쓰면 읽히지 않거든요.
거짓말보다 말하지 않기가 어렵다
‘완전 자동’을 안 썼습니다.
네이버와 티스토리는 공식 발행 API가 없어서 사용자 컴퓨터의 데스크톱 앱이 필요합니다. 감출 게 아니라 미리 말할 일입니다.
‘검색 1위 보장’도 쓰지 않았어요. 순위는 저희가 정하는 게 아니라 매일 재서 보여줄 뿐이거든요.
후기와 사용자 수도 마찬가지입니다. 아직 유료 고객이 없습니다. 없는 후기를 만드는 건 ‘지어내지 않는 것’을 파는 서비스가 할 짓이 아니에요.
화면 예시로 넣은 숫자 옆에는 ‘숫자는 예시’라고 붙였습니다. 네이버, 페이스북, 워드프레스는 조회수를 가져올 방법이 없어서 ‘가져오지 못한다’고 그대로 적었습니다.
기획서를 먼저 쓴 뒤에 코드를 짜야 한다
처음엔 바로 코드부터 짰습니다. 한 번 지적을 받고 멈췄어요.
무엇을 어떤 순서로 보여줄지, 사진은 어떤 장면을 몇 장 쓸지, 절대 쓰지 않을 말은 무엇인지를 문서로 먼저 정했습니다.
그러고 나니 만드는 게 빨랐습니다. 순서가 거꾸로였던 거죠.
A/B 테스트는 충분한 트래픽이 있을 때 한다
헤드라인은 하나로 갔습니다. “밤 11시에 쓴 글이, 아침엔 여섯 곳에 올라가 있습니다.”
후보가 셋 있었지만 방문자가 아직 적을 땐 나누면 어느 쪽도 판단이 서지 않습니다.
낮은 트래픽 상태에서는 페이지 최적화가 의미가 없다
2주 뒤에 첫 화면 이탈률과 ‘올린 뒤’까지 내려온 비율을 봅니다.
숫자가 안 나오면 페이지를 또 고치는 게 아니라 유입을 먼저 볼 생각입니다. 아무도 안 들어오는 페이지는 아무리 고쳐도 숫자가 안 움직이거든요.
![[파마비아] 웹사이트 리디자인 4번 실패하며 배운 것](https://wp.cyan-agency.com/wp-content/uploads/2026/09/famavia-wpfeat-7713214992.png)

![[파마비아] 블로그 검색 순위를 실시간으로 추적하는 방법](https://wp.cyan-agency.com/wp-content/uploads/2026/09/famavia-wpfeat-1195847865.png)

![[파마비아] macOS 앱 배포 중 놓친 4가지 실수와 해결책](https://wp.cyan-agency.com/wp-content/uploads/2026/09/famavia-wpfeat-2963098529.png)

![[파마비아] SNS 발행 전 이미지 작업으로 지치는 콘텐츠 작가들을 위해](https://wp.cyan-agency.com/wp-content/uploads/2026/09/famavia-wpfeat-3801976810.png)
