좋아 보이는 홈페이지를 발견하면 그 구성을 그대로 쓰고 싶을 수 있다. 큰 이미지와 세련된 제목, 정돈된 카드가 한 번에 해결책처럼 보인다. 나는 실제로 만든 여러 구조를 다시 보면서 화면의 분위기와 방문자가 해야 할 일은 별도로 판단해야 한다는 기준을 정리했다.
서비스를 이해해야 하는 사이트, 입력해서 결과를 확인하는 사이트, 많은 자료에서 필요한 것을 고르는 사이트의 첫 길은 같지 않았다. 여기서는 업체나 주소를 공개하지 않고 현재 확인한 소스의 구성만 비교한다. 특정 업종이 반드시 한 가지 디자인을 써야 한다는 결론보다 왜 어떤 순서가 필요한지 판단할 재료를 남긴다.
서비스 소개에서는 하는 일을 먼저 이해하게 했다
서비스 소개 작업의 대화에는 일반 사람이 어디에서 어떤 방식으로 일이 이루어지는지 이해하기를 원한다는 요청이 있었다. 현재 지침과 소스에는 첫 화면 바로 아래에 여섯 개의 쉬운 업무 단계를 두고 주된 버튼도 그 과정으로 연결하도록 되어 있다. 시각적 참고의 흐름을 그대로 끝까지 복사한 것이 아니라 필요한 이해를 앞에 놓은 구성이다.
방문자가 서비스 이름을 안다고 실제 범위를 아는 것은 아니다. 어떤 준비와 제작, 확인을 하는지 보아야 자신의 요청과 맞는지 판단할 수 있다. 다만 이 단계 설명이 실제 모든 고객에게 같은 일정과 결과를 보장한다는 뜻은 아니다. 소개 사이트가 전달하는 업무와 개별 운영 결과는 다른 근거로 다룬다.
도구형에서는 설명과 입력을 가까이 두었다
도구형 소스의 첫 화면에는 질문과 설명 옆에 입력 영역이 있다. 도구 목록과 정보 글도 별도의 길로 이어진다. 결과를 확인하려고 들어온 사람에게 긴 회사 소개를 먼저 통과하게 하기보다 어떤 값을 입력하고 무엇을 볼지 가까이 놓는 구성으로 읽을 수 있다.
그러나 계산 화면이 있다는 사실만으로 숫자가 실제 시장이나 실시간 데이터와 연결됐다고 말할 수 없다. 확인한 프로젝트에는 합성 자료를 쓰는 지도와 예시 계산도 있었다. 나는 입력·결과의 위치를 설명할 때 데이터의 출처와 예시 범위를 함께 남긴다. 화면 순서가 좋은 것과 결과의 근거가 맞는 것은 각각 확인해야 한다.
자료 제공형에서는 이용 대상과 찾는 조건을 나눴다
자료 제공형의 현재 첫 화면에는 이용 역할에 따라 들어가는 길이 있다. 자료실에서는 대상, 연령, 자료 유형을 조합하고 제목과 설명을 검색할 수 있다. 첫 화면은 어떤 이용자를 위한 곳인지 알려주고 자료실은 필요한 파일을 좁히는 역할을 맡는다. 모든 자료를 첫 화면에 같은 비중으로 펼치지 않았다.
이 구조를 다른 사업에 적용한다면 역할 이름만 그대로 가져오기보다 그 사업에서 실제로 선택에 쓰이는 조건을 찾아야 한다. 대상이 같아도 자료의 용도와 형식이 다를 수 있다. 반대로 구분이 별 도움을 주지 않으면 필터만 복잡해진다. 어떤 차이가 선택을 바꾸는지에 따라 진입과 탐색을 설계한다.
화면의 리듬과 정보의 순서를 따로 본다
큰 이미지, 밝고 어두운 구간, 여백과 글자 크기는 읽는 흐름을 만들 수 있다. 하지만 그 리듬이 곧 같은 정보 순서를 뜻하지는 않는다. 서비스의 과정을 먼저 설명할지, 사용 도구를 먼저 보여줄지, 자료를 찾는 길을 먼저 줄지는 내용의 목적에 달려 있다.
나는 좋은 참고에서 구성 원리를 얻더라도 브랜드 문구, 실적, 고객 이름을 옮겨 새 사이트의 사실처럼 쓰지 않는다. 서로 다른 목적의 사이트를 합칠 때도 눈에 보이는 순서를 복사하기 전에 각 구간이 어떤 질문에 답하는지 적는다. 답할 질문이 없다면 멋진 영역 하나를 남기는 이유부터 다시 본다.
하나의 사이트에서도 첫 길은 여러 개일 수 있다
소개형, 도구형, 자료형은 사이트 전체를 딱 세 종류로 고정하기 위한 이름이 아니다. 서비스 회사에도 계산 도구와 지식 자료가 있을 수 있고, 자료실에도 운영자를 설명하는 페이지가 필요할 수 있다. 한 방문자에게 모두 같은 순서로 보게 하기보다 목적에 맞는 첫 연결과 상세 길을 둔다.
이번 홈페이지도 서비스 소개와 블로그, 모듈을 함께 갖는다. 홈은 제작과 운영의 방향을 설명하고 기록과 모듈은 독립해서 읽을 수 있게 했다. 어느 화면을 먼저 보더라도 지금 읽는 내용의 목적과 더 알아볼 길을 찾을 수 있어야 한다. 단일한 회사 소개 흐름에 모든 사용 목적을 억지로 넣지 않는 기준이다.
비교는 구조의 근거이며 성과 순위가 아니다
이번 비교에서는 현재 코드의 첫 영역과 연결, 서비스 지침과 관련 대화, 자료실 분류 소스를 확인했다. 각 구조를 바꿨을 때 문의나 사용률이 얼마나 달라졌는지 측정하지 않았다. 예전 검수 기록이 있다는 이유로 지금의 모든 화면이 다시 검증됐다고 설명하지도 않는다.
새 사업의 홈페이지를 계획한다면 대표적인 방문 상황 하나씩을 적고 첫 화면에서 원하는 행동까지 이어지는지 살펴볼 수 있다. 내용과 자료가 충분한지 확인한 뒤 실제 PC와 모바일에서 읽기와 입력, 이동을 검토하는 단계가 필요하다. 먼저 구조의 이유를 정하고 그 이유가 실제 화면에서도 성립하는지 확인하는 순서다.