디자인 회사에 홈페이지를 맡길 때는 시안의 아름다움과 함께 실제 화면의 네 가지를 확인합니다. 시안이 휴대폰 폭에서도 같은 질서로 구현되는지, 글꼴과 이미지의 웹 사용권이 있는지, 글자와 배경의 대비가 충분한지, 움직임이 속도와 읽기를 해치지 않는지입니다. 이 네 가지는 검색엔진의 페이지 경험 기준과 접근성 기준에 그대로 이어집니다.
시안보다 먼저 확인할 네 가지
| 확인할 것 | 물어볼 말 | 기준 |
|---|---|---|
| 실제 구현 | 이 시안이 360px 휴대폰에서는 어떻게 바뀌나요? | 휴대폰 화면 시안이나 실제 작동 화면을 함께 받기 |
| 사용권 | 글꼴과 이미지는 웹에서 써도 되는 사용권인가요? | 인쇄용 사용권과 웹 사용권은 다를 수 있음 |
| 대비 | 본문 글자와 배경의 대비는 얼마인가요? | WCAG 기준 일반 글자 4.5:1, 큰 글자 3:1 이상 |
| 움직임 | 움직임을 줄이도록 설정한 사람에게는 어떻게 보이나요? | 운영체제의 움직임 줄이기 설정을 존중하는지 |
디자인 에이전시가 만든 포트폴리오 화면이 그림 파일로만 남아 있다면, 실제로 공개된 사이트 주소를 물어 휴대폰으로 직접 열어 보십시오. 그림으로 본 인상과 실제 화면의 속도·글자 크기가 다른 경우가 많습니다.
움직임이 많은 화면도 읽히고 빨라야 합니다.
구글은 핵심 웹 지표로 쪽이 얼마나 빨리 보이고 입력에 반응하며 화면이 밀리지 않는지 잽니다. 큰 움직임 장면은 이 숫자를 쉽게 나쁘게 만듭니다. 그래서 움직임은 처음 보이는 순간의 속도를 해치지 않는 방식으로 붙여야 합니다.
디자인 단계에서 정해야 검색이 쉬워지는 것
- 쪽 제목과 첫 문단이 들어갈 자리가 시안에 있는지(큰 그림만 있는 첫 화면이 아닌지)
- 글이 그림 안에 박혀 있지 않고 글자로 읽히는지
- 버튼과 링크가 무엇을 하는지 글로 적혀 있는지
- 이미지마다 무엇을 보여 주는지 설명 글을 넣을 수 있는지
자주 묻는 질문
디자인 회사와 홈페이지 제작 업체는 무엇이 다른가요?
디자인 회사는 화면과 브랜드 표현에, 홈페이지 제작 업체는 구현과 운영에 무게를 두는 경우가 많습니다. 둘을 나눠 맡긴다면 시안을 구현할 때 누가 휴대폰 화면과 검색 설정을 책임지는지 정해 두십시오.
디자인이 화려하면 검색에 불리한가요?
화려함 자체보다 글이 그림 안에 갇히거나 첫 화면이 늦게 뜨는 것이 문제입니다. 글은 글자로, 움직임은 속도를 해치지 않게 만들면 화려한 화면도 검색에 보일 수 있습니다.
디자인 에이전시 포트폴리오는 어떻게 확인하나요?
공개된 사이트 주소를 받아 휴대폰으로 열고, 지금도 운영 중인지와 검색에서 그 사이트가 나오는지 함께 보십시오.
로고와 글꼴 원본은 받아야 하나요?
로고 원본 파일과 글꼴 사용권 범위는 계약서에 적어 받아 두십시오. 업체를 바꾸면 원본이 없어 같은 로고를 다시 만들지 못하는 일이 생깁니다.
아래 링크는 각 회사가 공개한 안내입니다. LJH의 제휴·인증·성과를 뜻하지 않습니다.Google 검색 센터: Core Web Vitals 및 Google 검색결과 이해하기 ↗Google 검색 센터: Google 페이지 경험 이해하기 ↗W3C: WCAG 2.2 이해하기 — 대비(최소) ↗MDN: prefers-reduced-motion(움직임 줄이기 설정) ↗국가법령정보센터: 장애인차별금지 및 권리구제 등에 관한 법률(제21조 정보통신·의사소통 등에서의 정당한 편의제공의무) ↗