템플릿을 가져왔는데도 내 홈페이지처럼 느껴지지 않는 가장 큰 이유는 첫 화면에 샘플 제목과 모호한 버튼이 남아 있기 때문입니다. 전체 디자인을 다시 만들지 않아도 제목, 설명, 버튼 세 가지만 정확히 바꾸면 방문자가 무엇을 하는 곳인지 빠르게 이해할 수 있습니다.
이 글의 목표는 화면 편집 모드에서 첫 제목과 버튼을 수정하고, 링크와 모바일 줄바꿈까지 확인하는 것입니다.
이 글의 화면은 실제 고객 사이트가 아닌 가상 실습 사이트 ‘온담 베이커리’입니다. 최종 화면 확인일: 2026년 8월 29일.
1. 첫 화면이 해야 할 일은 하나입니다
첫 화면은 회사 연혁을 모두 설명하는 자리가 아닙니다. 방문자가 “누구를 위한 곳인지, 무엇을 제공하는지, 다음에 무엇을 누르면 되는지”를 이해하게 만들면 충분합니다.
온담 베이커리는 제목을 “매일 아침 구워, 동네의 하루를 여는 빵”으로 정했습니다. 대상과 특징이 보이고, 지나치게 긴 설명을 넣지 않았습니다.
2. 제목은 대상·제공·이점으로 씁니다
제목이 막힐 때는 다음 세 칸을 채워 한 문장으로 합치면 쉽습니다.
- 대상: 누구에게 필요한가
- 제공: 무엇을 제공하는가
- 이점: 방문자에게 어떤 도움이 되는가
예를 들어 “고객을 생각하는 최고의 서비스”는 어느 업종에도 붙을 수 있어 기억하기 어렵습니다. “예약한 시간에 바로 찾는 당일 제작 케이크”처럼 실제 이용 장면이 떠오르는 문장이 더 좋습니다.
3. 버튼 문구에는 클릭 뒤의 결과를 씁니다
“자세히 보기”보다 “오늘의 빵 보기”, “상담 시간 확인”, “오시는 길 확인”처럼 클릭 후 화면을 예상할 수 있는 문구를 사용합니다. 버튼 하나에 행동 하나만 맡기는 것이 중요합니다.
버튼 링크도 함께 확인합니다. 사이트 안의 페이지라면 해당 페이지 주소를, 지도나 예약 서비스처럼 바깥으로 이동한다면 전체 주소를 입력합니다. 외부 링크는 새 창이 필요한지도 사용 흐름에 맞게 결정합니다.
4. 대표 이미지는 제목을 반복하지 않아야 합니다
제목이 “매일 아침 굽는 빵”이라면 이미지는 포장된 상자보다 굽는 과정이나 막 나온 제품을 보여주는 편이 자연스럽습니다. 이미지 안에 같은 제목을 다시 넣지 마세요. 글자는 화면의 HTML 제목으로 두어야 모바일에서도 읽기 쉽고 나중에 수정하기도 편합니다.
5. 모바일에서는 제목 줄 수와 버튼 크기를 봅니다
PC에서 한 줄로 보이는 제목이 모바일에서는 세 줄 이상으로 꺾일 수 있습니다. 모바일 미리보기에서 다음 항목을 확인합니다.
- 한글 단어 중간이 잘리지 않는가
- 제목이 이미지나 메뉴와 겹치지 않는가
- 버튼 문구가 두 줄로 꺾이지 않는가
- 버튼을 손가락으로 누르기 충분한가
완료 확인표
- 첫 제목만 읽어도 업종과 제공 내용이 보인다.
- 버튼 문구가 클릭 뒤의 결과를 설명한다.
- 버튼이 정확한 내부 또는 외부 주소로 연결된다.
- 이미지와 제목이 같은 내용을 자연스럽게 설명한다.
- 모바일에서 제목과 버튼이 겹치거나 잘리지 않는다.
다음 글에서는 상단 메뉴에 “오시는 길”을 추가하고, 연결되는 새 페이지를 함께 만드는 과정을 진행합니다.
