홈페이지 메뉴 초안 그리는 법

메뉴 관계와 연결 화면의 초안

홈페이지 메뉴 초안은 상위 메뉴와 하위 항목의 관계를 나무 모양으로 그리고, 각 항목에 연결할 화면을 적어 만듭니다. 병원과 업체가 같은 구조를 보면서 누락·중복·미정 항목을 확인할 수 있도록 메뉴 이름과 도착 화면을 따로 기재합니다. 병원이 정한 안내 항목을 출발점으로 삼으며, 초안을 그리는 동안 새 메뉴 선정까지 한꺼번에 진행하지 않습니다.

초안에는 항목 사이의 관계와 클릭한 뒤 도착할 곳이 함께 있어야 합니다. 메뉴 이름만 나열하면 어떤 항목이 어느 상위 메뉴에 속하는지 업체가 다시 해석해야 합니다. 선만 연결하면 해당 항목이 별도 화면을 여는지, 다른 화면 안의 특정 영역으로 이동하는지 알기 어렵습니다. 병원 담당자는 두 정보를 각각 읽을 수 있도록 그림과 설명을 구성합니다.

완성된 디자인처럼 꾸밀 필요는 없습니다. 상위 메뉴를 위에 놓고 하위 항목을 아래로 연결한 뒤, 각 항목 옆에 연결 화면을 기재하면 됩니다. 아직 정하지 못한 내용은 빈칸으로 남기지 않고 미정이라고 표시합니다. 초안을 읽는 사람이 추측해야 하는 부분이 있는지를 제출 전 판단 기준으로 삼습니다.

초안에 함께 적을 정보

다음 표는 확정된 안내 항목을 옮겨 적을 때 사용할 기록 틀입니다. 행에 적힌 표현은 필수 메뉴 목록이 아니므로 병원이 정한 실제 항목으로 대체합니다. 같은 상위 메뉴에 속한 항목도 연결 화면이 다르면 각각 기록합니다.

메뉴 이름은 방문자가 이동 항목에서 읽을 문구이고, 연결 화면명은 업체와 도착 위치를 식별하기 위한 이름입니다. 두 이름이 같아도 각각의 칸에 기재합니다. 메뉴 이름이 변경됐다는 이유만으로 화면도 새로 만드는 것으로 해석되지 않도록 하기 위한 기록 방식입니다.

더블유쓰리씨의 웹 접근성 이니셔티브는 짧고 내용을 설명하는 제목이 관련 문단을 묶고 문서의 구조를 전달하도록 안내합니다. 이 설명은 화면 안의 제목에 관한 것이며, 병원 메뉴 구조도의 작성 양식을 정하는 규정은 아닙니다. 병원 초안에서는 메뉴 관계를 그리는 작업과 연결 화면 안의 제목을 정하는 작업을 따로 관리합니다.

안내 항목에서 구조도로 옮기는 순서

병원 담당자는 확정한 안내 항목 목록과 각 항목의 연결 대상 자료를 먼저 준비합니다. 기존 화면을 재사용한다면 화면명과 해당 화면을 식별할 수 있는 캡처를 함께 모읍니다. 새 화면은 임시 이름을 정해 기록하고, 내용 자료가 아직 없어도 항목 자체를 목록에서 제외하지 않습니다.

1. 안내 항목을 하나씩 펼쳐 놓습니다. 문서 여러 곳에 흩어진 항목을 한 목록으로 모으고, 원래 적혀 있던 이름을 유지합니다.
2. 상위 메뉴 아래에 하위 항목을 연결합니다. 어디에 속할지 결정하지 못한 항목은 별도 공간에 미정으로 표시하고 연결선을 임의로 그리지 않습니다.
3. 각 메뉴 이름 옆에 연결 화면을 기재합니다. 별도 화면인지 화면 내부의 영역인지 적고, 다른 항목과 도착 화면을 공유하면 같은 화면명을 사용합니다.
4. 원래 목록과 그림을 대조합니다. 목록에는 있지만 그림에 없는 항목, 반복해서 그린 항목, 연결 대상이 미정인 항목을 각각 표시합니다.

그림의 선은 상하 관계를 나타내는 용도로 사용합니다. 같은 화면으로 연결된다는 이유만으로 서로 다른 메뉴 항목 사이에 소속 관계를 그리지 않습니다. 공유 연결은 화면명 옆의 설명으로 처리해 상하 관계와 섞이지 않게 합니다.

병원은 항목의 소속과 연결 의도를 기록하고, 업체는 이를 어떤 화면 구성으로 구현할지 설명하도록 요청합니다. 초안 전달 자료에는 구조도와 항목 목록을 함께 포함합니다. 그림만 전달할 때 생길 수 있는 긴 이름의 생략이나 미정 메모의 누락을 줄이기 위한 방식입니다.

업체 구조도와 병원 초안의 대조표

업체가 구조도를 돌려주면 병원 초안의 항목을 기준으로 대응 위치를 기록합니다. 이름이 달라졌거나 여러 항목이 합쳐졌다면 업체에 변경 이유와 연결 화면을 설명하도록 요청합니다. 대조표에는 의견만 쓰지 않고 병원이 승인하거나 수정 요청할 내용을 남깁니다.

업체 구조도에 새로 생긴 항목은 대조표 끝에 추가하고 제안 이유를 받습니다. 병원은 기존 항목의 이동인지 별도 안내의 추가인지 가린 뒤 수용 여부를 정합니다. 답이 남은 행은 처리 완료로 표시하지 않고, 결정할 사람과 업체에 회신할 내용을 함께 기재합니다.

누락과 중복을 잘못 판정하는 경우

메뉴 이름이 달라도 같은 안내 항목을 옮긴 것이라면 곧바로 누락으로 판정하지 않습니다. 업체 구조도의 항목이 어떤 화면으로 연결되는지 대조한 뒤, 이름만 변경됐는지 내용을 제외했는지 가립니다. 반대로 이름이 그대로 있어도 도착 화면이 달라졌다면 반영 완료로 처리하지 않습니다. 이름과 연결 대상 중 무엇이 달라졌는지 기록해야 수정 요청이 구체적입니다.

같은 화면이 여러 메뉴에서 연결된다고 해서 모두 중복 오류는 아닙니다. 병원이 의도한 진입 경로라면 여러 항목을 유지하면서 화면을 공유할 수 있습니다. 업체에 공유 연결인지 별도 화면 제작인지 명시하도록 요청합니다. 별도 화면이라면 각각 담을 내용의 차이를 설명받고, 차이를 정하지 못한 상태에서는 화면 분리를 확정하지 않습니다.

메뉴 그림에서 항목이 사라졌어도 다른 화면 안에 포함됐을 수 있습니다. 업체가 통합했다고 설명하면 어느 화면의 어느 영역에 담기는지 기록하게 합니다. 병원은 해당 안내로 이동하는 방식까지 정해졌는지 확인한 뒤 통합을 승인합니다. 화면 안에 내용이 있다는 설명만으로 원래 메뉴의 이동 의도가 유지됐다고 판단하지 않습니다.

미정 항목의 결정 기록

미정 표시는 아직 선택하지 못한 내용을 구체적으로 적어야 합니다. 상위 메뉴 미정, 연결 화면 미정, 화면 공유 여부 미정처럼 결정 대상을 나눠 기재합니다. 서로 다른 문제가 한 항목에 남아 있다면 각각의 결정란을 마련합니다. 단순히 추후 협의라고 쓰면 업체가 어떤 답을 기다리는지 알기 어렵습니다.

병원 담당자는 미정 항목마다 필요한 답과 답을 정할 사람을 연결합니다. 메뉴 이름의 표현을 정할 일과 연결할 화면의 범위를 정할 일은 따로 회신할 수 있습니다. 일부가 확정되면 해당 내용만 기록하고 남은 문제는 계속 미정으로 표시합니다. 회신 문서에서는 항목명을 그대로 사용해 어느 결정을 전달하는지 명확하게 합니다.

수정 요청을 반영한 구조도를 받으면 변경 대상 행을 중심으로 재대조합니다. 업체가 한 항목을 이동하면서 다른 연결도 변경했다면 그 변경 내용을 함께 기록하게 합니다. 병원은 대조표의 결정 사항이 그림에 반영된 뒤에만 해당 행을 완료로 처리합니다.

항목 식별 번호와 초안 판본

메뉴 이름을 여러 차례 수정할 때는 항목마다 변하지 않는 식별 번호를 부여하면 대응 관계를 유지하기 쉽습니다. 번호는 방문자에게 공개할 메뉴 문구와 별도로 관리합니다. 업체가 구조도에서 이름이나 위치를 변경해도 같은 항목에는 기존 번호를 사용하도록 요청합니다.

초안 파일에는 작성 날짜와 판본 표시를 넣고, 회신할 때 기준으로 삼은 파일명을 기재합니다. 서로 다른 판본을 기준으로 수정하면 이미 승인한 내용이 다시 미정으로 처리될 수 있습니다. 변경 내역에는 항목 번호와 변경 내용을 함께 기재하며, 이전 판본도 보관합니다. 담당자가 바뀌면 최신 파일과 아직 답이 남은 목록을 함께 전달합니다.

자주 묻는 질문

메뉴 초안은 전용 프로그램으로 그려야 합니까?

전용 프로그램을 반드시 사용할 필요는 없습니다. 문서나 표 작성 도구로도 항목과 연결 관계를 표현할 수 있습니다. 업체와 서로 열람할 수 있고 수정 의견을 남길 수 있는 형식을 선택합니다. 병원에서 계속 수정할 예정이라면 편집 가능한 파일도 보관합니다.

종이에 그린 메뉴 초안을 업체에 보내도 됩니까?

종이 초안도 글자와 연결선이 선명하면 협의 자료로 사용할 수 있습니다. 사진에서 일부가 잘리거나 메모가 흐릿하면 다시 촬영합니다. 여러 장으로 구성했다면 각 장의 이어지는 위치를 표시하고, 긴 항목명은 별도 문서에도 기재합니다.

메뉴 초안에 색상과 글꼴도 정해야 합니까?

색상과 글꼴은 메뉴 관계를 전달하는 데 필요한 범위에서만 사용합니다. 디자인 선호 사항이 있다면 구조도와 별도 문서로 전달합니다. 색상만으로 확정과 미정을 표시하지 말고 상태를 문자로도 적습니다. 초안을 시각 디자인의 최종 승인 자료로 사용하지 않습니다.

휴대전화 화면용 메뉴 초안도 따로 그려야 합니까?

작은 화면에서 항목의 위치나 묶음이 달라질 계획이라면 별도 초안을 준비하는 편이 좋습니다. 내용과 연결 대상이 같고 펼치는 방식만 달라진다면 공통 초안에 표시 방식에 대한 요구를 덧붙일 수 있습니다. 업체에는 실제 화면에서 메뉴를 펼치고 이동하는 모습을 설명하도록 요청합니다.

외부 서비스로 이동하는 항목도 초안에 넣습니까?

병원이 정한 메뉴에 포함된다면 외부 이동 항목도 기록합니다. 연결 대상은 서비스 이름으로 적고 홈페이지 밖으로 이동한다는 사실을 표시합니다. 내부 화면 제작 항목과 혼동하지 않도록 업체에 필요한 연결 작업을 설명하게 합니다. 해당 서비스의 사용 가능 여부는 병원이 별도로 판단합니다.

이어서 읽을 주제

블로그마케팅을 이어 읽으면 홈페이지에 정리한 안내를 바탕으로 어떤 내용을 별도 게시물에서 설명할지 판단할 수 있습니다. 메뉴 이름을 게시물 제목으로 그대로 사용하는 대신, 독자가 추가로 궁금해할 내용을 정리하는 방법을 검토합니다.