병원 홈페이지 아이콘 스타일 맞추기

같은 기능을 나타내는 모양의 일관성

병원 홈페이지 아이콘은 같은 기능에 같은 모양을 쓰고 페이지마다 표현을 일관되게 유지하는 방식으로 맞춥니다. 선 굵기·채움 방식·크기·여백의 세부 기준은 업체와 정한 아이콘 예시를 기준으로 설계합니다. 병원 담당자는 개별 그림의 취향을 정하기 전에 각 아이콘이 어떤 기능을 나타내는지 목록으로 정리합니다.

같은 예약 기능인데 첫 화면에는 달력, 진료 안내에는 전화기 모양을 사용한다면 그림의 의미부터 정리해야 합니다. 반대로 예약 날짜 선택과 전화 연결처럼 실제 행동이 다르면, 비슷한 위치에 있는 버튼이라도 같은 아이콘을 요구할 이유가 없습니다. 담당자는 버튼을 누른 뒤 수행하는 행동을 기준으로 기능 이름을 기재하고, 업체에 기능과 그림의 대응을 요청합니다.

더블유쓰리씨의 웹 접근성 이니셔티브는 홈페이지 안에서 이동 안내의 이름·스타일·위치를 일관되게 유지하도록 안내합니다. 대한민국 정부 디자인 시스템은 스타일을 화면 구성 요소와 기본 패턴의 시각적 일관성을 위한 규칙으로 설명합니다. 다만 병원은 이 설명만으로 특정 선 굵기나 아이콘 크기가 정답이라고 판단하지 않고, 실제 홈페이지에서 사용할 예시를 업체와 정합니다.

기능의 일관성과 그림의 통일성은 승인할 때 구분해서 판단합니다. 기능이 정확해도 어떤 페이지는 굵은 채움 그림, 다른 페이지는 가는 선 그림을 사용하면 표현이 달라집니다. 반대로 그림을 모두 같은 방식으로 그렸더라도 서로 다른 행동에 같은 모양을 사용하면 기능을 구별하기 어렵습니다. 담당자는 기능 이름과 스타일 예시를 별도 항목으로 기록합니다.

업체와 합의할 스타일 비교 항목

스타일은 말로만 요청하지 않고 동일한 기능의 후보 그림을 나란히 배치해 결정합니다. 업체가 서로 다른 기능의 그림만 제시하면 모양의 차이와 그리는 방식의 차이를 구별하기 어렵습니다. 병원은 같은 그림을 서로 다른 스타일로 표현한 비교 자료와 실제 버튼에 배치한 자료를 함께 요청합니다.

승인할 예시에는 아이콘만 확대해 놓은 그림보다 주변 문구와 버튼을 포함한 화면이 필요합니다. 같은 파일 크기라도 그림 안의 빈 공간 때문에 실제 모양이 작게 느껴질 수 있기 때문입니다. 담당자는 유독 작거나 무겁게 느껴지는 그림을 표시하고, 업체에 그 차이를 조정한 적용 예시를 요청합니다.

모든 아이콘의 외곽을 똑같은 너비로 만드는 것까지 통일 기준에 포함할 필요는 없습니다. 가로로 긴 그림과 둥근 그림은 모양이 달라 기계적으로 크기를 맞추면 균형이 어색해질 수 있습니다. 병원은 치수만 같은지보다 같은 용도의 버튼에서 특정 그림만 과하게 두드러지는지를 판단합니다.

기능 목록부터 시작하는 실행 순서

병원 담당자는 현재 화면과 개편 예정 화면을 구분해 기능별 아이콘 목록을 준비합니다. 자료에는 기능 이름, 사용 페이지, 연결되는 행동, 기존 그림을 포함합니다. 화면 이름만 전달하지 말고 같은 기능이 반복되는 위치도 기재해야 업체가 수정 범위를 정할 수 있습니다.

1. 담당자는 홈페이지의 메뉴와 버튼에서 아이콘을 수집하고, 실제 행동이 같은 항목끼리 묶습니다. 장식용 그림은 기능 아이콘과 구분해 목록에 표시합니다.
2. 업체는 기능별 후보와 스타일 비교 화면을 제시하고, 병원은 앞에서 정한 기준에 따라 사용할 예시를 승인합니다. 의견이 남은 항목은 승인 항목과 구분해 기록합니다.
3. 업체가 페이지에 적용하면 담당자는 기능 목록의 순서대로 실제 화면을 대조합니다. 차이가 있는 항목은 해당 화면과 수정 요청을 연결해 전달합니다.

처음부터 모든 페이지를 자유롭게 평가하면 기능 이름과 그림에 대한 의견이 섞이기 쉽습니다. 병원 담당자는 목록을 취합하고, 업체는 그림과 적용 화면을 준비하도록 업무를 구분합니다. 병원 안에서 의견이 다를 때는 각자가 원하는 그림만 전달하지 말고, 어떤 기능을 다르게 이해했는지 함께 설명합니다.

업체에 보내는 자료에는 아직 확정되지 않은 기능도 표시합니다. 예약 접수 방식이나 메뉴 구성이 변경될 예정이라면 기존 그림을 그대로 승인하기보다 기능이 확정된 뒤 결정할 항목으로 분리합니다. 담당자는 변경 예정이라는 이유로 목록에서 삭제하지 않고, 결정이 필요한 내용을 기재합니다.

페이지별 적용 결과의 대조 기록

적용 결과는 승인한 그림과 실제 페이지를 함께 열어 대조합니다. 담당자는 그림 자체의 차이와 배치 과정에서 생긴 차이를 구분해 업체에 전달합니다. 아래 표의 기능과 페이지는 기록 항목의 예시이며, 병원 홈페이지에 해당 기능이 있을 때 실제 명칭으로 작성합니다.

수정 요청에는 해당 페이지 이름과 화면 구분을 함께 기재합니다. 컴퓨터 화면에서는 승인 예시와 같아도 모바일 메뉴에서 별도 그림을 사용했다면 그 위치를 특정합니다. 업체가 수정한 뒤에는 요청한 위치뿐 아니라 같은 아이콘을 공유하는 페이지도 대조해 다른 표현이 남았는지 확인합니다.

차이가 없는 항목에도 적용 완료 여부를 기록합니다. 수정할 항목만 남기면 아직 확인하지 않은 페이지와 승인한 페이지를 구별하기 어렵습니다. 담당자는 미확인, 수정 요청, 적용 완료처럼 업무 상태를 구분하고, 해결된 요청은 이전 화면과 혼동되지 않게 정리합니다.

허용할 차이와 수정할 차이의 구별

아이콘 표현이 다르다는 이유만으로 모두 수정할 필요는 없습니다. 선택된 메뉴를 표시하기 위해 채움 방식을 달리했다면, 상태에 따른 표현으로 합의했는지 판단합니다. 그런 합의 없이 특정 페이지에서만 채움형을 사용했다면 업체에 변경 이유를 묻고 수정 여부를 결정합니다.

방향을 나타내는 화살표는 이동 방향에 따라 모양이 달라질 수 있습니다. 이때 담당자는 화살표 방향까지 같게 요구하지 않고, 같은 역할의 화살표가 서로 다른 그리는 방식을 사용하는지 대조합니다. 닫기와 이전 화면 이동처럼 행동이 다른 항목은 비슷한 선 모양이라는 이유로 하나의 그림으로 통합하지 않습니다.

기능 아이콘과 진료 항목을 꾸미는 그림도 구분해야 합니다. 진료 소개에 쓰는 장식 그림을 버튼 아이콘과 같은 크기로 줄이면 세부 표현이 복잡해질 수 있습니다. 담당자는 클릭하는 기능을 나타내는 그림인지, 설명을 보조하는 그림인지 용도를 기재하고 해당 용도에 맞는 예시를 요청합니다.

컴퓨터 화면과 모바일 화면에서 주변 배치가 다르면 여백을 조정할 수 있습니다. 다만 모바일이라는 이유만으로 같은 기능의 모양을 별도 취향에 따라 변경하지는 않습니다. 업체가 화면별 예외를 제안하면 적용 대상과 이유를 기록하고, 다른 모바일 페이지에도 그 예외가 필요한지 결정합니다.

추가와 교체 요청의 승인 범위

새 기능을 추가할 때는 기존 아이콘 중 비슷한 그림을 임의로 재사용하기보다 기능의 차이를 먼저 정리합니다. 담당자는 새 기능 이름과 기존 기능의 차이, 사용할 위치를 업체에 전달합니다. 업체에는 현재 스타일에 맞는 후보와 실제 배치 화면을 요청합니다.

기존 그림을 교체할 때는 해당 그림이 사용된 페이지 전체를 수정 범위에 포함합니다. 일부 화면만 교체하면 같은 기능에 이전 그림과 새 그림이 함께 남을 수 있습니다. 병원 담당자는 업체가 제시한 사용 위치 목록을 변경 요청과 연결하고, 이번 작업에 포함되지 않는 위치가 있다면 이유를 기재합니다.

임시 아이콘의 최종 반영 여부

시안에 임시로 사용한 그림은 최종 승인 항목과 구분해야 합니다. 배치 설명을 위해 추가한 임시 그림이 완성 화면에 남으면 병원과 업체가 서로 다른 예시를 기준으로 작업할 수 있습니다. 담당자는 미정인 그림을 목록에 표시하고, 확정 그림으로 교체할 대상과 적용 위치를 업체에 전달합니다.

승인 이후 업체가 대체 그림을 제안하면 변경 사유와 영향을 받는 기능을 먼저 요청합니다. 기존 그림과 비슷하다는 설명만으로 승인하지 말고, 현재 버튼에 배치한 화면을 받아 결정합니다. 변경을 승인한 항목은 예시 자료에도 반영해 이후 요청에서 이전 그림을 다시 사용하지 않도록 정리합니다.

자주 묻는 질문

아이콘을 꼭 병원 전용으로 제작해야 합니까?

병원 전용 제작이 항상 필요한 것은 아닙니다. 필요한 기능을 표현할 수 있는 기존 후보가 있다면 이를 검토할 수 있습니다. 전용 제작 여부는 표현할 기능과 수정 범위, 사용할 자료의 조건을 업체와 협의해 결정합니다.

예산이 부족하면 아이콘 수정 순서를 어떻게 정합니까?

담당자는 이용자가 행동을 잘못 이해할 수 있는 항목부터 수정 대상으로 선정합니다. 기능 구별에 문제가 없는 장식 요소는 별도 일정으로 협의할 수 있습니다. 업체 견적을 받을 때는 필수 수정과 후속 정비를 구분해 작업 범위를 요청합니다.

홈페이지 아이콘에 움직임을 넣어도 괜찮습니까?

움직임 추가는 정지된 그림의 스타일 승인과 별도로 결정하는 편이 좋습니다. 어떤 상황에서 움직이고 언제 멈추는지 업체에 시연을 요청합니다. 단순히 눈에 띄게 하려는 목적이라면 움직임 없이 기능을 표현하는 안도 함께 검토합니다.

의료 장비 그림을 메뉴 아이콘으로 사용해도 됩니까?

이용자가 해당 장비와 메뉴 내용을 연결할 수 있는지부터 판단합니다. 장비의 외형을 모르면 메뉴의 뜻을 이해하기 어렵거나 다른 검사로 오해할 수 있습니다. 병원 담당자는 그림의 사실성만 평가하지 말고 메뉴 문구와 함께 의미가 전달되는지 검토합니다.

모든 메뉴에 아이콘을 추가해야 통일됩니까?

모든 메뉴에 아이콘을 추가해야 하는 것은 아닙니다. 문구만으로 충분히 구별되는 메뉴까지 그림을 늘리면 비슷한 모양을 억지로 만들 수 있습니다. 어떤 메뉴에 아이콘을 사용하는지 적용 범위를 먼저 정하고, 그림이 없는 메뉴도 의도된 구성인지 업체와 합의합니다.

이어서 읽을 주제

병원 영상 편집은 홈페이지와 영상에서 같은 기능을 안내할 때 시각 표현을 어떻게 연결할지 정하기 위해 이어 읽을 주제입니다. 병원 공간 브랜딩은 온라인 안내와 실제 공간의 표지에서 공통으로 사용할 표현의 범위를 판단하기 위해 이어 읽을 주제입니다.