손님이 먼저, 색은 그다음
누가 들어와 무엇을 누를지 정해야 색과 사진을 고를 기준이 생깁니다.
온다마케팅 · 광고 운영 자료
홈페이지 디자인, 업종과 손님, 색, 사진 순서로 정하는 기준
홈페이지 디자인은 업종과 찾아올 손님을 먼저 정한 뒤 그 손님에 맞춰 색, 글꼴, 사진, 첫 화면 배치를 차례로 고르는 일입니다. 템플릿은 이미 짜인 칸에 글과 사진을 채워 넣는 방식이고, 맞춤 디자인은 가진 자료와 손님 동선에 맞춰 화면을 새로 짜는 방식입니다.
참고하고 싶은 분위기와 지금 가진 자료로 디자인 방향을 함께 잡습니다. 카카오톡으로 홈페이지 디자인 상담 →
함께 확인할 자료: 손님부터 첫 화면까지 다섯 단계 · 템플릿·고쳐 쓰기·맞춤 디자인 비교 · 글자 대비 기준과 사진·글꼴 사용 범위
이해를 돕는 기획 이미지
이 페이지에서 확인할 내용
홈페이지 디자인
웹사이트 디자인은 무엇부터 정하나요?
틀을 빌릴지, 새로 그릴지
템플릿은 자료를 정해진 칸에 맞추고, 맞춤 디자인은 가진 사진과 글의 양에 맞춰 칸을 짭니다.
보기 좋음보다 읽히는 화면
글자와 바탕의 대비, 첫 화면을 덮는 팝업이 있는지부터 봅니다.
예쁜 홈페이지와 잘 쓰이는 화면은 어떻게 다른가요?
예쁜 홈페이지는 색과 사진이 보기 좋은 화면이고, 잘 쓰이는 화면은 손님이 무엇을 하는 곳인지 바로 알고 다음에 누를 곳을 찾는 화면입니다. 대표 사진이 고와도 한 줄 소개가 사진에 묻히거나 연한 글자가 바탕에 녹으면 문의로 이어지기 어렵습니다. 웹페이지 디자인이 쪽 한 장의 모양이라면, 사이트 전체 디자인은 여러 쪽이 함께 쓰는 색·글꼴·메뉴 규칙까지 정합니다.
로고와 대표 색을 새로 만드는 일은 브랜드 기준을 세우는 작업이라 따로 다루고, 홈페이지에서는 이미 쓰는 값을 화면 규칙으로 옮깁니다. 보기 좋은 디자인 홈페이지를 참고할 때도 그 회사가 받는 손님부터 확인합니다. 폭마다 배치가 바뀌는 구조는 반응형 홈페이지 자료에서, 공개 시안은 홈페이지 제작 레퍼런스에서 봅니다.
템플릿과 맞춤 디자인은 어떻게 다른가요?
홈페이지 디자인 템플릿·고쳐 쓰기·맞춤 디자인 비교
| 구분 | 어떻게 만드나 | 맞는 경우 |
|---|---|---|
| 템플릿 그대로 | 정해진 칸에 글·사진만 바꿔 넣음 | 자료가 적고 쪽 수가 정해졌을 때 |
| 템플릿 고쳐 쓰기 | 틀은 두고 색·글꼴·메뉴 순서를 바꿈 | 쓰던 틀에서 분위기만 바꿀 때 |
| 첫 화면만 맞춤 | 대문만 새로 그리고 안쪽은 같은 틀 | 첫인상은 살리고 예산은 줄일 때 |
| 맞춤 디자인 | 손님 동선과 가진 자료로 칸을 새로 짬 | 사진·사례가 많거나 기능을 붙일 때 |
온다마케팅 제작 상담 기준 · 2026년 10월 20일 작성 · 빌더형(직접 만드는 도구) 틀의 이용 조건은 그 도구 약관에서 확인합니다.
맞춤 디자인이 필요한 화면만 골라 견적으로 확인하세요.
색·글꼴·사진은 어떤 순서로 고르나요?
업종과 찾아올 손님
가상의 동네 필라테스 스튜디오라면 운동을 처음 시작하는 직장인처럼 받을 손님을 정하고, 그 손님이 누를 버튼(체험 수업 신청)을 적습니다.
대표 색과 글자색
간판·로고에 쓰는 색을 대표 색으로 두고, 본문 글자는 바탕과 대비가 큰 짙은 색으로 따로 정합니다.
제목 글꼴과 본문 글꼴
제목용 하나, 긴 안내문용 하나로 줄이고 파일을 받은 곳과 이용 조건을 적습니다.
쓸 사진과 새로 찍을 사진
가진 사진을 첫 화면용·안내용으로 나누고 빈 자리는 새로 찍습니다. 얼굴이 나오는 사람에게는 실어도 되는지 먼저 묻습니다.
첫 화면 배치
화면을 내리기 전에 보이는 범위를 시안에 선으로 긋고, 그 안에 넣을 것을 세 개 안쪽으로 줄입니다.
일정이 자주 멈추는 곳은 정해지지 않은 취향과 빠진 원본입니다. 대표가 고른 색과 실무자가 보낸 참고 사이트의 분위기가 다르거나, 로고 원본이 없어 메신저로 받은 작은 그림을 늘려 써야 하는 일이 생깁니다. 그래서 상담에서는 손님 → 색 → 글꼴 → 사진 → 첫 화면 순서로 한 칸씩 정하고 시안 의견도 그 순서로 받습니다.
디자인 작업 전에 어떤 자료를 모으나요?
- 로고 원본 파일과 쓰는 색 코드
- 직접 찍은 사진 원본 묶음
- 참고 사이트 주소와 고른 이유
주의할 점: 저작권법 제4조는 저작물의 예로 어문저작물(소설·논문 등), 응용미술저작물, 사진저작물을 듭니다. 참고 사이트는 메뉴 순서와 배치 흐름만 메모하고 그곳의 사진·소개 글·그림은 가져오지 않습니다. 문화체육관광부·한국저작권위원회의 「글꼴 파일 저작권 바로 알기」 안내서(2019년 1월 개정)는 비영리·개인 용도 글꼴을 영리 목적으로 쓰는 경우를 사례로 다루니, 글꼴은 사용 범위부터 확인합니다.
디자인 단계에서 맡길 수 있는 작업은 무엇인가요?
참고 사이트 고르기와 구조 메모
같은 업종에서 규모가 큰 곳의 홈페이지 두세 곳을 골라 메뉴 순서, 첫 화면 버튼 자리, 사진과 글의 비율만 표로 적고 끌린 이유를 한 줄씩 붙입니다.
색·글꼴 기준표 만들기
대표 색·보조 색·글자색·버튼 색은 색 코드로, 글꼴은 이름과 받은 곳을 한 표에 적습니다. 인쇄물이나 SNS 이미지를 다른 사람이 만들어도 이 표로 같은 색을 씁니다.
첫 화면 시안과 사진 보정
대문(첫 화면)은 A안에 든 8만 원 항목, 메인 고급 연출은 C안에 든 15만 원 항목이고, 어둡거나 크기가 제각각인 사진은 사진 보정(10장마다 5만 원)으로 손봅니다(모두 부가세 별도).
시안을 받으면 어떤 순서로 확인하나요?
- 휴대폰으로 첫 화면 보기
- 글자와 바탕 대비 재기
- 손님 기준으로 의견 추리기
휴대폰에서 첫 화면만 열어 무엇을 하는 곳인지와 누를 버튼이 화면을 내리기 전에 보이는지 봅니다. 대비는 글자색·바탕색 코드를 대비 계산 도구에 넣어 잽니다. W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2는 보통 글자 4.5:1, 18포인트(굵으면 14포인트) 이상 큰 글자 3:1 이상을 AA 기준으로 두고 로고 속 글자는 예외로 봅니다. 국가표준 한국형 웹 콘텐츠 접근성 지침도 2022년 12월 이 지침의 2.1·2.2 내용을 반영했습니다. 막힐 때 볼 것: 회색 글자가 기준에 못 미치면 색을 짙게 바꾸고, 사진 위 글자는 어두운 막을 깔거나 사진 밖으로 뺍니다.
지금 필요한 것부터
홈페이지 디자인 방향 상담 때 가져올 자료
준비할 자료: 로고 원본과 지금 쓰는 색 · 마음에 드는 참고 사이트 주소 · 첫 화면에 쓰고 싶은 사진. 현재 준비된 내용부터 함께 살펴봅니다.
디자인 순서 점검 메모
내 확인 메모 만들기
확인한 항목을 선택하세요. 선택하지 않은 항목은 추가 질문으로 정리됩니다. 입력은 이 브라우저에서만 처리되며 전송·저장되지 않습니다.
작성·자료 기준
W3C·한국지능정보사회진흥원·국가법령정보센터·문화체육관광부·Google 문서 기준 · 2026년 10월 20일 확인 · 온다마케팅 기획 안내 · 2026년 10월 20일 작성.
자주 묻는 질문
5개 질문
이 문서는 디자인을 정하는 다섯 단계와 템플릿·맞춤 디자인의 차이를 가상의 동네 필라테스 스튜디오 예로 정리했습니다. 대비 기준과 저작권·글꼴 안내는 공식 문서에서 열어 본 내용만 옮겼습니다.
- 홈페이지 디자인 비용은 얼마인가요?
- 온다마케팅 가격 가이드에는 디자인만 떼어 매긴 줄이 없고 화면 항목으로 계산합니다. 패키지는 A안 80만·B안 163만·C안 349만 원이고, 대문(첫 화면) 8만 원은 A안부터, 메인 고급 연출 15만 원은 C안에 들어 있습니다. 예시로 A안에 메인 고급 연출과 사진 보정 20장(10만 원)을 더하면 105만 원입니다(모두 부가세 별도).
- 홈페이지 템플릿으로 만들어도 괜찮을까요?
- 알릴 내용이 적고 쪽 수가 정해져 있다면 충분합니다. 다만 칸 크기가 정해져 있어 긴 사진·글은 잘리고 같은 틀을 고른 사이트와 첫인상이 겹칠 수 있으니, 대표 사진과 첫 화면 한 줄만큼은 우리 자료로 채웁니다.
- 기업 홈페이지 디자인은 가게 홈페이지와 무엇이 다른가요?
- 회사 홈페이지는 거래를 검토하는 담당자가 사업 분야·연혁·문의 경로를 메뉴에서 바로 찾게 짜고, 가게 홈페이지는 위치·영업시간·가격을 첫 화면 가까이에 둡니다.
- 랜딩페이지 디자인은 홈페이지와 어떻게 다르게 잡나요?
- 광고를 누른 사람이 처음 닿는 한 화면짜리 쪽이라 첫 화면 문구와 신청 버튼 자리가 더 무겁습니다. 광고에서 약속한 말을 첫 줄에 잇고, 내려 읽는 중에도 버튼이 다시 보이게 둡니다. 광고 연결과 비용은 랜딩페이지 제작 자료에서 다룹니다.
- 홈페이지 메인 디자인은 무엇부터 배치하나요?
- 무엇을 하는 곳인지 알리는 한 줄, 그 말을 보여 주는 대표 사진, 할 일 하나를 담은 버튼 순서로 둡니다. 행사 소식은 첫 화면을 덮는 팝업보다 얇은 띠로 알립니다. Google 검색 센터도 콘텐츠를 가리는 전면 광고·대화상자 대신 화면 일부만 차지하는 배너를 권합니다.
지금 필요한 것부터
홈페이지 디자인 방향 상담 때 가져올 자료
준비할 자료: 로고 원본과 지금 쓰는 색 · 마음에 드는 참고 사이트 주소 · 첫 화면에 쓰고 싶은 사진. 현재 준비된 내용부터 함께 살펴봅니다.