자사 사이트 디자인의 첫 과제는 고급스러운 스타일 선택이 아니라 사업 이해, 제품 탐색, 신뢰 판단, 문의까지 모든 단계를 사용자가 원활히 마치는지 확인하는 것입니다. 홈페이지가 예뻐도 분류에서 핵심 사양이 숨거나 모바일에서 연락 버튼이 화면 밖으로 밀릴 수 있습니다. 검수는 여러 페이지와 실제 과제를 다뤄야 하며 홈페이지 이미지 하나로 공개를 결정하면 안 됩니다. 이 글은 수출 사이트를 신설하거나 개편하는 팀을 위한 검토 경로입니다. 아래 와이어프레임과 전후 비교는 교육용이며 AIRSANG이 특정 고객 프로젝트를 완료했다는 뜻이 아닙니다.

사용자 과제를 먼저 적고 화면 디자인 결정하기

화면을 그리기 전에 세 과제를 적습니다. 처음 온 구매자가 무엇을 파는지 이해하는 데 걸리는 시간, 모델을 아는 방문자가 사양과 적합 정보를 찾는지, 연락하려는 사람이 다음에 무엇을 제출할지 아는지입니다. 시간은 내부 테스트 기록이지 모두가 정해진 초 안에 끝낸다는 약속이 아닙니다. 유통업체와 최종 소비자도 대상이면 진입점을 각각 표시하고 전혀 다른 구매 경로를 하나의 메뉴에 몰아넣지 마세요.

과제를 홈페이지, 분류, 제품, 연락 페이지에 대응합니다. 홈페이지는 포지셔닝과 경로, 분류는 선택 축소, 제품은 적합성과 신뢰, 연락은 소통 부담 감소를 담당합니다. 디자이너는 이를 바탕으로 정보 계층을 만들고 사업 담당자는 문구의 정확성을 확인합니다. Google의 SEO 기본 가이드 는 콘텐츠 이해와 탐색을 돕도록 강조합니다. 여기서는 이를 디자인 점검으로 적용하며 특정 레이아웃을 검색 순위 보장으로 말하지 않습니다.

브랜드 표현이 정해지지 않았다면 먼저 다음을 읽어 보세요. 자사 사이트 브랜드 이미지 디자인 방법 을 통해 가치 제안과 시각적 방향을 명확히 적습니다. 이 글은 그 정보를 각 페이지에 구현하는 문제를 이어서 다룹니다.

홈페이지: 첫 화면에 대상·가치·다음 행동 제시하기

주 제목은 '무엇인가', 보조 문구는 '누구에게 맞는가'에 답하기

첫 제목은 사업 언어를 쓰고 업종을 구분하지 못하는 '혁신적인 솔루션'만 적지 마세요. 보조 문구는 제품 범위, 고객, 납품 지역을 설명할 수 있지만 확인되지 않은 인증, 납기, 시장 범위는 넣지 않습니다. 주 이미지는 제품 사용 상황, 실제 서비스 절차, 명확한 교육용 도식을 보여야 합니다. 추상 장식 이미지는 핵심 정보를 대체하지 못합니다. 훑어본 방문자가 다음이 분류 보기인지 자료 다운로드인지 연락인지 알아야 합니다.

주 버튼에 명확한 과제 부여하기

핵심 행동을 내용과 맞춥니다. 처음 알아보는 사람은 '제품 분류 보기', 사양 목록을 가진 사람은 '요구사항 제출'로 안내합니다. 버튼은 클릭 결과를 설명하고 모든 카드에 '자세히 보기'만 쓰지 마세요. 보조 버튼은 가능하지만 주 버튼과 같은 시각적 무게로 경쟁해서는 안 됩니다. 여러 사업을 보여야 한다면 사용자 과제로 묶은 뒤 카드 수와 순서를 정하고 모두를 슬라이드에 넣지 않습니다.

홈페이지 메뉴에는 별도 문제가 있습니다. 분류 계층이 너무 많다면 홈페이지 메뉴 복잡도 점검 을 참고해 실제 제품 찾기 과제로 시험하고 미적 취향만으로 메뉴를 삭제하지 마세요.

분류와 제품: 비교 가능한 정보 계층 만들기

분류는 예쁜 썸네일의 나열이 아닙니다. 선택에 노력이 드는 제품은 카드에서 최소한 시리즈, 용도, 핵심 사양, 대상자를 구분해야 합니다. 필터도 실제 질문에 맞춰야 하므로 구매자가 크기·소재·인증을 먼저 묻는다면 '신제품'과 '인기'만 유일한 필터로 두지 마세요. 결과, 빈 상태, 정렬 라벨도 명확해야 합니다. 이런 구조는 제품 자료의 완전성에 달려 있으니 디자인 시안으로 누락 데이터를 숨기지 않습니다.

제품 정보의 일반적 우선순위는 제품 식별, 적합성 판단, 차이 이해, 상세 확인, 다음 행동입니다. 이미지, 사양, 납품 안내, 문의 진입점을 이 경로에 맞춥니다. 복잡한 기술 정보는 긴 이미지 한 장에 넣지 말고 훑어볼 수 있는 그룹으로 나눕니다. 재고나 가격이 실시간 동기화되지 않으면 적용 범위와 갱신일을 표시하고, 확인 못 하면 확인 대기로 둡니다. 시안에 숫자를 지어내지 마세요.

페이지 간 일관성도 중요합니다. 같은 사양은 분류 카드, 상세, 문의 양식에서 같은 이름을 쓰며 MOQ 같은 용어는 처음에 최소 주문량이라고 설명할 수 있습니다. Google 메뉴·내부 링크 권장은 중요 페이지 발견을 돕지만 카드 밀도와 시각 순서는 제품과 사용자 테스트로 정해야 합니다.

레이아웃과 글꼴: 판단 근거를 빠르게 찾게 하기

글꼴 통일은 모든 글자를 같은 크기로 만드는 것이 아닙니다. 제목은 계층, 본문은 연속 읽기, 라벨은 보조 정보를 담당합니다. 특히 연회색 작은 글씨만 세련됨의 수단으로 삼지 마세요. 구매 조건, 사양 제한, 배송 범위는 의사결정 정보라 명확히 읽혀야 합니다. 문단 폭, 행간, 여백은 언어와 기기별로 확인합니다. 중국어·영어·숫자가 섞이면 버튼이나 단위 줄바꿈이 정지 시안보다 더 쉽게 틀어집니다.

W3C WAI의 페이지 구조 튜토리얼 은 적절한 구역과 제목 계층이 탐색과 이해를 돕는다고 설명합니다. 검토 시 시각 계층과 실제 HTML 제목 계층을 함께 볼 수 있습니다. 소제목처럼 보여도 굵은 문단뿐이면 보조 기술이 섹션으로 인식하지 못할 수 있습니다. 접근성과 관리 가능성 점검이지 제목 태그 하나로 모든 접근성 문제를 해결한다는 뜻은 아닙니다.

템플릿도 홈페이지 이미지뿐 아니라 구성요소 제약을 봐야 합니다. 웹 디자인 템플릿 선택 가이드 는 편집 영역, 구조 적합성, 유지보수 비교를 돕습니다. 이 글은 선택 후 실제 페이지 검수에 집중합니다.

모바일은 데스크톱 축소가 아니라 과제 순서 재배치

휴대전화 첫 화면에는 제목, 일부 이미지, 행동 하나만 들어갈 수 있습니다. 가장 중요한 정보가 여전히 앞에 있는지, 필터를 찾는지, 사양 표가 읽히는지, 입력 키보드가 다음 단계를 가리지 않는지 확인합니다. 태블릿도 따로 봐야 합니다. 데스크톱 세 열 카드가 비좁은 두 열이 되며 메뉴와 글자 길이에 동시에 영향을 줄 수 있습니다.

고정 폭 스크린샷만 보지 마세요. 브라우저를 좁히고 글자를 확대해 문장 잘림, 버튼 겹침, 전체 가로 스크롤을 확인합니다. W3C의 리플로 설명 은 콘텐츠 재배치 판단 배경을 제공합니다. 표처럼 2차원 표현이 필요한 일부는 자체 가로 스크롤이 가능하지만 페이지 전체가 따라 움직여서는 안 됩니다. 시안은 각 분기점에서 어느 영역이 먼저 줄바꿈하고 재정렬되는지 개발자에게 알려야 합니다.

터치, 키보드 탐색, 양식 라벨도 시험합니다. W3C WAI 라벨 튜토리얼은 입력에 식별 가능한 라벨을 제공하도록 권장합니다. 입력하면 사라지는 플레이스홀더는 필드명을 대신하지 못합니다. 오류는 어느 항목이 문제인지와 수정 방법을 알려야 합니다. 문의 양식은 짧을수록 좋은 것이 아니라 소통을 시작할 필수 정보를 먼저 모으고 나머지는 후속 대화에서 보완하는 것이 중요합니다.

같은 검수표로 보기 좋음과 사용하기 좋음을 비교하기

회의에서 '시안이 더 고급스럽다'와 '사용자가 못 찾는다'는 말은 모두 사실일 수 있습니다. 취향을 논쟁하기보다 두 안을 같은 과제로 점검하세요. 아래 표는 교육용 검토 틀이며 업계 공통 점수나 실제 고객 테스트 결과가 아닙니다. 각 행에 실제 기록, 기기, 담당자를 추가해야 합니다.

디자이너는 정보 계층과 상태 시안, 사업 담당자는 자료의 진실성, 개발자는 동작과 적응형 구현, 검토자는 과제 완료 기록을 맡을 수 있습니다. 그러면 아름다운 모듈을 유지하거나 장식 이미지를 삭제할 때 개인 취향을 넘어 토론 가능한 이유가 생깁니다.

공개 전 페이지 간 흐름을 한 번 점검하기

실제 콘텐츠를 넣고 예외 상태 시험하기

실제 길이의 제품명·사양과 이미지 비율을 넣습니다. 매우 긴 제목, 재고 설명 없는 제품, 필터 결과 없는 상태를 시험하고 각 경우 레이아웃이 안정적인지 봅니다. 다국어는 중국어를 영어로 바꾸는 것으로 끝나지 않습니다. 메뉴 폭, 숫자 형식, 납품 지역 표현, 링크 목적지를 페이지별로 확인합니다. 아직 공개하지 않은 번역이나 시장 약속을 현재 역량처럼 보여 주지 마세요.

점검을 최종 납품 자료로 만들기

페이지 목록, 핵심 과제, 세 기기 레이아웃, 중요 구성요소 상태, 실제 콘텐츠 출처, 미해결 문제를 보관합니다. 점검은 일회성 검수 스크린샷이 아닙니다. 공개 후 실제 상담 피드백, 사이트 검색어, 자주 묻는 질문으로 우선순위를 갱신하되 데이터가 없으면 관찰 대기로 적습니다. 제안 단계라면 다음 문서에 검수 항목을 넣을 수 있습니다. 웹 디자인 제안서 요구사항 목록 에 포함해 디자인과 개발이 같은 범위를 사용하게 합니다.

결론: 과제 완료를 확보한 뒤 표현을 다듬기

디자인 주의사항은 하나의 점검 흐름으로 정리됩니다. 사용자 과제를 명확히 하고 홈페이지·분류·제품·연락 페이지에 정보를 나누며 제목·사양·행동 진입점·구조를 일치시킨 뒤 휴대전화·태블릿·데스크톱에서 실제로 확인합니다. 시각적 선택은 이해·비교·문의를 도와야 하며 페이지 뜻을 추측하게 해서는 안 됩니다. 개편 전 가장 중요한 제품 탐색 또는 문의 경로 하나를 골라 사이트를 모르는 사람이 수행하게 하고 막힌 곳을 기록하세요. 그 증거를 디자인과 개발에 전달해야 다음 수정 대상을 결정할 수 있습니다.