홈페이지 디자인과 정보 배치 기준
회사 홈페이지의 디자인은 첫 화면에 회사 이름,
한 줄 소개,
하는 일,
연락 방법을 두고,
나머지 쪽은 방문자의 질문 순서대로 배치하는 것이 기본입니다.
템플릿은 목적과 첫 화면,
모바일에서 읽히는지를 보고 고르고,
색은 한 가지 주 색과 중립 색으로 줄여 글자 대비를 확인합니다.
아래에 첫 화면,
메뉴,
문구,
템플릿,
색,
신뢰 정보를 두는 기준을 정리했습니다.
회사 홈페이지 첫 화면에는 무엇을 넣어야 하나요?
첫 화면에는 회사 이름,
한 줄 소개,
하는 일,
연락 방법의 네 가지를 스크롤 없이 보이게 둡니다.
방문자는 화면을 내리기 전에 어떤 회사인지부터 판단합니다.
큰 이미지만 깔고 글이 없는 첫 화면은 보기에는 멋져도 무엇을 하는 곳인지 알려 주지 못합니다.
- 맨 위: 회사 이름과 로고를 왼쪽 위에 두어 어느 회사인지 바로 보이게 합니다.
- 그 아래: 한 줄 소개를 가장 큰 글자로 적어 누구에게 무엇을 해 주는 곳인지 알립니다.
- 소개 밑: 하는 일을 짧은 낱말 서너 개로 늘어놓습니다.
- 눈에 띄는 자리: 전화나 문의하기처럼 연락 방법을 하나 둡니다.
나머지 쪽의 순서는 방문자가 품는 질문을 따릅니다.
어떤 회사인가,
무엇을 하는가,
어디에 있는가,
어떻게 연락하는가의 차례이며,
이 순서를 지키면 소개 글이 길어져도 길을 잃지 않습니다.
인사말이나 회사 철학은 소개 쪽으로 내리고 첫 화면에는 하는 일을 먼저 두는 편이 안전합니다.
메뉴와 쪽 나누기는 어떻게 구성하나요?
메뉴는 소개,
하는 일,
오시는 길,
문의의 네 개로 시작하고 늘릴 때는 방문자 질문 순서를 따릅니다.
처음부터 메뉴를 많이 만들면 쪽마다 채울 글이 모자라 빈 쪽이 생기고,
방문자도 헷갈립니다.
정해진 개수는 없지만 한눈에 읽히는 범위를 넘기지 않는다는 원칙을 세워 두면 판단이 쉬워집니다.
- 이름은 한두 낱말로 짧게 붙이고 「회사 소개」 「하는 일」처럼 같은 종류의 말로 맞춥니다.
- 같은 내용을 두 메뉴에 나누어 넣지 않습니다.
- 문의는 맨 끝에 숨기지 말고 위쪽 메뉴에도 두어 언제든 누를 수 있게 합니다.
메뉴를 늘려야 할 때는 기존 쪽 안에 절 하나를 더 넣을 수 있는지 먼저 살펴보세요.
메뉴 이름은 회사 안에서 부르는 부서 이름보다 거래처가 부르는 이름으로 붙입니다.
하는 일이 여럿이라면 한 쪽에 길게 이어 붙이기보다 서비스마다 쪽을 나누는 편이 방문자가 찾기 쉽습니다.
방문자는 회사 이름보다 필요한 서비스를 먼저 찾아보는 경우가 많고,
쪽마다 한 가지 질문에 답하면 검색 서비스와 화면 읽기 도구도 내용을 구분하기 쉬워집니다.
서비스가 한두 개뿐이라면 쪽을 억지로 나누지 않고 소개 쪽 안의 절로 둡니다.
한 줄 소개와 서비스 문구는 어떻게 쓰나요?
한 줄 소개는 누구에게 무엇을 해 주는지 한 문장으로 쓰고,
하는 일은 짧은 낱말로 나눠 적습니다.
길이는 80자 안쪽이 좋고,
형용사를 줄이고 구체적인 낱말을 늘릴수록 읽는 사람이 떠올리는 모습이 같아집니다.
아래는 설명을 위해 꾸민 가상의 회사 예시상사의 문장이며 실제 회사가 아닙니다.
- 나쁜 예 「최고의 품질로 고객을 만족시키는 종합 기업」 → 고친 예 「사무실에 필요한 소모품을 정해진 요일에 채워 드립니다」
- 나쁜 예 「혁신과 신뢰를 바탕으로 도약합니다」 → 고친 예 「견적 요청에 답장하는 담당자를 적어 둡니다」
- 나쁜 예 「다양한 분야의 고객과 함께합니다」 → 고친 예 「병원과 학원 사무실에 소모품을 납품합니다」
하는 일은 문장이 아니라 낱말 하나가 서비스 하나를 가리키게 적고,
한 낱말에 두 가지 일을 섞지 않습니다.
근거를 보여 줄 수 없는 성과 숫자는 쓰지 않는 편이 낫습니다.
단추 글자는 누르면 무엇이 일어나는지 드러나게 씁니다.
「자세히 보기」처럼 어디로 가는지 알 수 없는 말보다 「문의하기」 「전화 걸기」 「오시는 길 보기」처럼 다음 행동을 적으면 방문자가 망설이지 않습니다.
같은 행동에는 쪽마다 같은 글자를 쓰고,
한 화면에서 가장 눈에 띄는 단추는 하나로 줄입니다.
템플릿과 참고 홈페이지는 어떻게 고르나요?
템플릿은 홈페이지의 목적,
첫 화면 구성,
모바일 화면,
바꿀 수 있는 범위의 네 가지를 보고 고릅니다.
예쁜 화면 하나만 보고 고르면 내 글과 사진을 넣었을 때 모양이 달라져 처음부터 다시 맞춰야 하는 일이 생깁니다.
아래 네 가지를 후보마다 같은 순서로 확인하면 비교가 쉬워집니다.
- 목적: 회사 소개,
서비스 안내,
문의 접수처럼 홈페이지가 할 일과 같은 구성인지 봅니다. - 첫 화면: 회사 이름,
한 줄 소개,
연락 방법이 놓일 자리가 있는지 봅니다. - 모바일: 제목이 길어도 줄바꿈이 자연스럽고 단추가 손가락으로 눌리는지 봅니다.
- 바꿀 범위: 내 로고,
색,
문구,
사진으로 바꿨을 때 어디까지 모양이 유지되는지 봅니다.
화면 디자인은 눈에 보이는 단추,
색,
글꼴을 다루는 UI와,
정보를 찾아 문의하기까지 가는 흐름을 다루는 UX가 함께 맞아야 합니다.
예쁜 화면이어도 필요한 정보를 못 찾으면 방문자는 돌아가므로 후보를 비교할 때 「예쁜가」와 「찾기 쉬운가」를 같이 묻습니다.
모바일 화면을 확인하는 방법은 반응형 글에 따로 정리했습니다.
참고 홈페이지는 베끼려는 것이 아니라 좋아하는 점(색,
배치,
글,
사진)을 구분해서 전하려고 고릅니다.
한두 곳,
많아도 세 곳 안쪽으로 고르고 마음에 드는 이유를 네 가지로 나눠 적으면 만드는 사람이 의도를 정확히 읽습니다.
「예쁘다」는 말은 사람마다 다른 모습을 떠올리게 하지만 나눠 적으면 구체적인 요청이 됩니다.
- 색: 주 색이 무엇인지,
바탕이 밝은지 어두운지를 적습니다. - 배치: 첫 화면에 무엇이 어디에 놓였는지,
메뉴가 위에 있는지 옆에 있는지를 적습니다. - 글: 문장이 짧은지 긴지,
말투가 딱딱한지 부드러운지를 적습니다. - 사진: 인물,
제품,
건물 가운데 무엇이 중심인지를 적습니다.
참고한다는 것은 베낀다는 뜻이 아닙니다.
다른 회사의 화면,
문구,
이미지를 그대로 옮기면 저작권 문제가 생길 수 있으므로 순서와 분위기만 가져옵니다.
거래처나 같은 업종 회사의 홈페이지도 참고 대상이 되지만 그 회사의 문구와 사진은 가져오지 않습니다.
시안을 받은 뒤의 의견도 같은 방식으로 전합니다.
「전체적으로 별로예요」보다 「메뉴 글자가 작아요」 「문의 단추 색이 눈에 띄지 않아요」처럼 화면의 한 곳과 이유를 짚어 한 번에 모아 전하면,
고칠 횟수가 정해진 단계에서도 의견이 흩어지지 않습니다.
색,
글꼴,
여백은 어떻게 정하나요?
색은 한 가지 주 색과 중립 색으로 줄이고,
글꼴은 한두 종류만 쓰며,
글 사이에는 여백을 넉넉히 둡니다.
주 색은 로고나 간판처럼 이미 쓰는 색을 기준으로 정하고,
바탕과 본문에는 흰색과 회색 계열을 둡니다.
글자와 배경의 대비는 WCAG(웹 콘텐츠 접근성 지침)의 명도 대비 기준으로 4.5 대 1 이상이 일반 글자에 안전한 범위이며,
큰 글자는 기준이 다를 수 있어 표준 문서를 함께 봅니다.
- 주 색: 한 가지만 정해 단추와 제목 바탕에만 씁니다.
- 중립 색: 흰색,
회색,
짙은 회색이 바탕과 본문을 맡습니다. - 강조: 문의 단추처럼 눌러야 할 곳에만 주 색을 한 번 더 씁니다.
- 글꼴: 한두 종류만 쓰고 제목과 본문은 크기와 굵기로 구분합니다.
- 여백: 제목과 본문 사이,
묶음과 묶음 사이를 같은 간격으로 띄웁니다.
여백은 빈 공간이 아니라 묶음을 가르는 선입니다.
제목,
소제목,
본문의 크기 차이를 분명히 두고 줄 사이를 넉넉히 하면 방문자가 읽지 않고 훑기만 해도 구조가 보입니다.
본문 글자 크기는 휴대폰에서 확대하지 않고도 읽히는 크기를 기준으로 잡습니다.
쪽이 늘어도 모양이 달라지지 않게 로고 위치,
주 색,
글꼴,
단추 모양을 한 장에 적어 두면 좋습니다.
로고,
색,
말투가 쪽마다 같을 때 방문자는 같은 회사라고 알아봅니다.
색 값만 있으면 직접 계산할 수도 있습니다.
두 색의 상대 휘도를 구해 밝은 쪽에 0.05를 더한 값을 어두운 쪽에 0.05를 더한 값으로 나눕니다.
이 식으로 파란색 #1d4ed8 에 흰 글자를 올리면 약 6.7 대 1,
청록색 #0f766e 은 약 5.5 대 1,
짙은 남색 #1b2533 은 약 15.5 대 1이 나옵니다.
사진과 로고는 어떻게 준비하나요?
사진은 직접 찍었거나 사용 허락을 받은 것만 쓰고,
로고는 배경이 투명한 파일과 원본을 함께 준비합니다.
작은 이미지를 억지로 늘려 쓰면 흐리게 보이므로 해상도가 충분한 원본을 받아 두세요.
인물이 나오는 사진은 찍힌 분께 홈페이지에 올린다고 알리고 동의를 받으며,
검색해서 찾은 이미지는 저작권이 있으므로 허락 없이 올리지 않습니다.
- 파일 형식: 사진은 JPEG나 PNG,
로고는 배경이 투명한 PNG나 벡터 파일이 쓰기 좋습니다. - 통일감: 같은 장소에서 비슷한 밝기로 찍은 사진을 모읍니다.
- 사용 기록: 외부에서 받은 사진은 사용 허락 조건을 메일로 남겨 둡니다.
로고는 밝은 바탕과 어두운 바탕에서 모두 읽히는지 확인합니다.
배경이 흰색으로 박힌 로고 파일은 어두운 바탕에서 하얀 네모로 보입니다.
사진 속에 꼭 알려야 할 내용이 들어 있다면 같은 내용을 글로도 적습니다.
한국형 웹 콘텐츠 접근성 지침도 이미지에 대체 글을 제공하도록 안내합니다.
소개 문구를 이미지 한 장에 얹어 넣으면 복사할 수 없고 화면 읽기 도구와 검색 서비스가 읽지 못할 수 있으니,
중요한 문구는 글로 적습니다.
신뢰를 주는 정보는 어디에 두나요?
회사 이름,
대표,
주소,
전화,
사업자번호를 모든 쪽 아래에 두고 문의를 받는다면 개인정보 처리방침 링크도 둡니다.
방문자는 실제로 있는 회사인지 확인하려고 쪽 맨 아래를 살펴보며,
이 칸이 비어 있으면 연락처가 아무리 크게 적혀 있어도 망설입니다.
모든 쪽에 같은 자리로 놓으면 어느 쪽에서 들어오든 확인할 수 있습니다.
- 회사 이름: 사업자등록증에 적힌 이름과 같게 적습니다.
- 주소: 찾아오는 곳이라면 오시는 길 쪽과 같은 주소를 적습니다.
- 전화: 휴대폰에서 눌러 바로 걸리도록 연결합니다.
- 사업자번호와 영업시간: 확인하러 오는 거래처를 위해 함께 둡니다.
법령은 이름만 짚어 둡니다.
문의 폼으로 개인정보를 받으면 개인정보 보호법에 따라 개인정보 처리방침을 정해 공개해야 하고,
홈페이지에서 판매까지 하면 전자상거래법의 사업자 정보 표시 의무가 따릅니다.
조문의 적용 범위는 회사 규정과 전문가 확인이 필요하니 이 글을 법률 자문으로 쓰지 마세요.
소식이나 안내 글에는 작성한 곳과 마지막으로 확인한 날짜를 적어 두면 오래된 정보로 오해받지 않습니다.
이 글 맨 위에도 작성 주체와 마지막 확인 날짜가 적혀 있습니다.
인사책 홈페이지 제작의 디자인 범위는 단계마다 어떻게 다른가요?
기본형은 템플릿 3종 중 고르고,
고급형은 디자이너가 색과 사진을 다듬으며,
프리미엄형은 전용 디자인을 만듭니다.
단계 표에는 고급형 「디자이너가 색·사진 다듬기」,
프리미엄형 「우리 회사만의 디자인」으로 적혀 있습니다.
위에서 정리한 기준은 어느 단계에서든 같고,
단계는 그 기준을 어디까지 맡기느냐만 가릅니다.
입력 화면의 디자인 칸도 단계마다 다릅니다.
기본형은 「디자인 고르기」에서 깔끔 · 자연 · 단정 세 칸 중 하나를 누르고,
고급형과 프리미엄형은 「원하는 분위기」 한 줄을 적습니다.
기본형 세 칸 위에는 색 견본이 칠해져 있으며,
앞에서 계산한 세 색이 그 견본의 색입니다.
| 항목 | 내용 | 출처 |
|---|---|---|
| 글자 대비 기준 | 글자와 배경 4.5 대 1 이상 | WCAG 2.2 명도 대비 기준 |
| 기본형 템플릿 | 깔끔 · 자연 · 단정 3종 | 입력 화면 · 디자인 고르기 |
| 견본 색의 흰 글자 대비 | 약 6.7 · 5.5 · 15.5 대 1(저희가 계산한 값) | 입력 화면 견본 색으로 계산 |
| 입력 한도 | 한 줄 소개 80자 · 하는 일 직접 쓰기 30자 · 참고 홈페이지 3개 · 사진 3장 | 입력 화면 |
직접 해 보면 — 입력 화면에서 디자인 고르기와 참고 홈페이지 넣기
결제를 마치면 이어지는 내용 입력 화면에서 디자인 칸과 참고 홈페이지 칸을 채우면 디자인 방향이 전해집니다.
아래 순서는 화면에 적힌 칸 이름과 단추 글자를 그대로 옮긴 것입니다.
- 기본형은 「디자인 고르기」에서 하나 누르기깔끔 · 자연 · 단정 세 칸이 나란히 있고,
누르면 그 칸이 선택된 표시로 바뀝니다.
위에서 정한 주 색과 가장 가까운 칸을 고릅니다. - 고급형과 프리미엄형은 「원하는 분위기」 적기선택 칸이며 칸 안의 예시 문구는 「예) 차분한 남색 · 믿음직한 느낌」입니다.
색 이름과 느낌 낱말을 한 줄로 적습니다. - 「참고할 홈페이지」 칸 채우기제목 옆에 「최소 1개 · 3개까지」라고 적혀 있고,
첫 칸이 비어 있으면 아래 단추가 「참고 홈페이지를 1개 넣어 주세요」로 보이며 눌러지지 않습니다.
「색이 좋아요」 「배치가 좋아요」 「글이 좋아요」 「사진이 좋아요」 단추로 좋은 점을 고릅니다.
적은 주소는 글자로만 저장되며 인사책이 그 사이트를 자동으로 읽어 오지는 않습니다. - 「로고 · 사진」 칸 확인하기선택 칸입니다.
로고 칸에는 명함에 올린 로고가 있으면 「(명함)」,
없으면 「없음」이 적히고,
「+ 사진」을 누르면 JPEG · PNG · WebP · HEIC 이미지를 3장까지 올릴 수 있습니다. - 맨 위 접힌 칸의 회사 정보 대조하기「회사 이름 · 대표 · 주소 · 전화 · 사업자번호 · 영업시간」 칸 중 영업시간을 뺀 다섯 칸은 「인사책 자동」 표지와 함께 값이 미리 들어 있고,
영업시간은 직접 적으며 틀린 곳은 눌러서 고칩니다.
입력 화면은 원하는 방향을 말로 전하는 자리이며,
쇼핑몰이나 회원,
예약 결제처럼 화면 구성이 크게 다른 사이트는 맞춤형 상담으로 범위를 먼저 정합니다.