아이콘 의미화 4단계 가이드

아이콘은 화면 위의 작은 장식이 아니라 인터페이스 안에서 가장 짧은 어휘다. 아이콘은 어휘이지 장식이 아니다는 지적은 정확하다. 사용자가 글자를 보지 않고도 안정적으로 알아볼 수 있는 범용 기호는 대략 열 개 남짓이다

인쇄 현장에서는 이 문제가 꽤 크게 와닿는다. 돋보기는 검색, 톱니바퀴는 설정, 휴지통은 삭제, 더하기는 추가, X는 닫기, 집은 홈, 되돌아가는 화살표는 이전 단계, 재생 삼각형은 시작을 뜻한다. 이런 것들은 자주 쓰는 단어처럼 단독으로도 쓸 수 있다

문제는 그 열 개 남짓을 넘어선 뒤다. 하트, 별표, 북마크는 모두 ‘저장’처럼 보이지만 플랫폼에 따라 좋아요, 표시, 나중에 읽기를 뜻할 수 있다. 공유도 하나의 기호로 통일되어 있지 않다. Apple은 보통 사각형에 위쪽 화살표를 그리고, Android는 세 개의 점을 선으로 잇는다. 인쇄 업무 시스템에서 ‘검토 제출’, ‘원고 반려’, ‘프리프레스로 재전송’을 모두 텍스트 없는 Icon으로 우겨 넣으면 화면은 깔끔할 수 있다. 하지만 오류가 나면 아무도 레이아웃이 산뜻하다고 칭찬하지 않는다

Iconography, 즉 아이콘 시스템은 기능, 상태, 조작을 식별 가능한 이미지 기호 묶음으로 표현하는 디자인 방법이다. 프리프레스와 고객 포털에서 그 역할은 추측을 줄이는 것이지, 미적 부담을 늘리는 것이 아니다

Icon을 단독으로 써도 되는지 판단하려면, 처음 보는 사람이 짧은 시간 안에 같은 답을 말할 수 있는지를 봐야 한다. 디자이너 본인이 비슷하다고 느끼는지가 기준이 아니다

나는 아주 투박하지만 효과적인 방법을 쓴다. 아이콘에서 맥락을 모두 떼어내고 동료나 고객에게 약 5초 동안 단독으로 보여준 뒤, “이걸 누르면 무슨 일이 일어날까요?”라고 묻는다. 답이 흩어지면 텍스트를 붙인다. 답이 모이면 그때 텍스트를 빼는 것을 검토한다. 이 테스트가 회의실에서 30분 토론하는 것보다 믿을 만하다

인쇄 업무 인터페이스에서는 특히 이 단계를 건너뛰면 안 된다. 많은 버튼 뒤에는 비용이 붙어 있기 때문이다

・‘파일 삭제’는 휴지통을 쓰되 텍스트도 남겨야 한다. 고객이 단순히 목록에서 빼는 것이라고 착각하지 않게 하기 위해서다

・‘교정 승인’은 체크 표시만으로 처리하지 않는다. 체크는 흐름에 따라 완료, 통과, 결제 완료, 읽음으로 해석될 수 있다

・‘다시 업로드’는 화살표와 ‘파일 다시 업로드’를 함께 쓰는 편이 낫다. 회전 화살표 하나만 놓고 맞혀 보게 만들지 않는다

・‘프리프레스 검사로 보내기’ 같은 추상적인 동작에는 범용 기호가 없다. 그냥 글자로 쓰는 편이 빠르다

팀이 견적 포털, 고객 파일 업로드 페이지, 내부 주문 추적 패널을 정비하고 있다면 Mai Strategy 지식 아카데미 컨설팅 팀은 먼저 고위험 버튼을 점검한 뒤, 어떤 Icon은 단독으로 노출해도 되는지, 어떤 것은 반드시 label과 묶어야 하는지 결정하라고 권한다

인수인계 가능한 아이콘 어휘표는 각 Icon을 ‘기능, 텍스트, 상태, 사용 금지 상황’까지 분명한 항목으로 고정해야 한다. SVG 묶음 하나를 엔지니어에게 던져 주는 일이 아니다

중소 인쇄소라면 4단계면 충분하다. 처음부터 거대한 디자인 시스템으로 만들 필요는 없다

・1. 자주 쓰는 동작을 나열한다: 검색, 추가, 삭제, 다운로드, 업로드, 돌아가기, 승인, 반려, 견적, 결제, 주문 추적처럼 매일 클릭하는 기능부터 시작한다

・2. 단독 노출 가능한 기호를 표시한다: 돋보기, 톱니바퀴, 휴지통, 더하기, X, 홈, 돌아가기, 재생 같은 범용 기호는 후보에 올릴 수 있다. 그래도 사용 맥락은 봐야 한다

・3. 하나의 기호를 하나의 동작에 묶는다: 연필이 편집을 뜻한다면 사이트 전체에서 편집만 뜻해야 한다. 다른 페이지에서 연필을 메모 의미로 쓰면 안 된다

・4. 시각 규격을 한 세트로 고정한다: 같은 icon family, 같은 grid, 같은 stroke weight를 쓴다. 굵기가 다른 아이콘을 섞으면 한 권의 카탈로그 안에 세 가지 서체를 욱여넣은 것처럼 보인다

여기서 중요한 것은 화려하게 만드는 일이 아니다. 디자인, 고객 서비스, 프리프레스, 엔지니어링이 같은 말을 쓰게 만드는 일이다. 인쇄소가 가장 두려워해야 할 것은 Icon 하나를 잘못 그리는 일이 아니다. 부서마다 그 Icon을 제멋대로 이해하는 일이다

아이콘의 의미는 수주와 납기에 영향을 준다. 고객이 포털에서 한 번 잘못 선택하면, 그 뒤로 고객 서비스 확인, 프리프레스 반려, 일정 재조정, 납기 재협의로 번질 수 있기 때문이다

흔한 파일 업로드 흐름을 보자. 고객이 ‘파일 삭제’를 ‘이번 업로드 취소’로 이해하면 파일이 아직 임시 저장되어 있다고 생각할 수 있다. 영업 담당자가 상태 Icon을 보고 그것이 ‘결제 대기’인지 ‘원고 검토 대기’인지 모르면 확인 전화를 한 통 더 하게 된다. 프리프레스에서 ‘승인 완료’와 ‘인쇄로 전달 완료’를 비슷한 아이콘으로 표시하면 생산 지시서가 잘못된 단계로 들어가 꽤 곤란해진다

인쇄소에서 Icon 디자인을 검수할 때는 화면이 정돈되어 보이는지만 보면 안 된다. 흐름 안에서 추측이 한 번이라도 줄었는지를 봐야 한다. 내가 SaaS와 인쇄 업무 자동화 제품을 볼 때 특히 신경 쓰는 지점도 이것이다. 인터페이스가 작을수록 어휘는 더 정확해야 한다. 모바일 화면의 아이콘 하나는 데스크톱 시스템의 한 줄 설명보다 더 쉽게 오해된다

고객 포털을 고급 맞춤형 상업 인쇄 흐름에 연결하려면 MINDS 같은 서비스 환경에서는 ‘견적, 소재 선택, 교정, 원고 승인, 인쇄 전달’을 명확한 어휘로 나누는 일이 더 중요하다. 모든 단계가 용지, 후가공, 색상, 납기와 연결되어 있기 때문이다

중소 인쇄소가 인터페이스 전체를 먼저 다시 만들 필요는 없다. 오류가 가장 자주 나는 세 곳, 파일 업로드, 원고 승인, 주문 추적부터 고쳐도 체감된다

나는 매일 누군가 묻고, 매일 누군가 잘못 누르는 곳부터 고른다. 보기 좋은 아이콘 라이브러리를 서둘러 좇지 말고, 고객 서비스가 반복해서 설명하게 만드는 버튼부터 정리한다

・파일 업로드 페이지: 다운로드, 다시 업로드, 삭제, 미리보기는 범용 Icon과 텍스트를 함께 써야 한다. 고객이 파일 관리에서 오판하지 않게 하기 위해서다

・원고 승인 페이지: 승인, 반려, 메모, 수정 요청은 명확한 텍스트를 써야 한다. 체크와 X가 흐름의 책임을 혼자 떠안게 하면 안 된다

・주문 추적 페이지: 견적 대기, 결제 대기, 프리프레스 검사 중, 제작 중, 출고 가능은 상태 텍스트를 중심에 두고, Icon은 보조 식별용으로만 쓴다

・관리자 도구 모음: 매일 쓰는 내부 기능은 단계적으로 icon-only로 줄일 수 있다. 단, 신규 직원 교육과 SOP가 같은 아이콘 어휘를 쓴다는 전제가 있어야 한다

간단하다. 잘못 누르면 수정, 반려, 재배치, 고객 불만으로 이어지는 곳에는 텍스트가 있어야 한다. 단지 시각적으로 훑는 속도에만 영향을 주는 곳이라면 Icon은 천천히 정리해도 된다

・Icon은 인터페이스 안의 어휘다. 의미가 불안정하면 단독으로 내보내지 않는다

・열 개 남짓한 범용 기호를 제외하면, 대부분의 Icon은 label이 의미를 받쳐 줘야 한다

・프리프레스 시스템의 Icon 검수는 고객이 한 번 덜 추측하게 되었는지를 봐야 한다. 화면에서 글자가 몇 개 줄었는지가 기준이 아니다

・하나의 기호는 하나의 동작에만 묶어야 한다. 그렇지 않으면 고객 서비스, 프리프레스, 엔지니어링이 각자 번역하게 된다

・추상적인 흐름에 범용 아이콘이 없을 때는, 직접 텍스트를 쓰는 것이 보통 가장 저렴한 오류 방지 설계다

인쇄 제조 팀과 SaaS 팀의 다음 단계는 Icon을 더 많이 그리는 것이 아니다. ‘아이콘 어휘표’를 만드는 일이다. 파일 업로드, 원고 승인, 주문 추적, 결제, 인쇄 전달 흐름에서 위험도가 높은 버튼을 뽑고, Icon을 단독으로 쓸 수 있는지, label을 반드시 붙여야 하는지, 되돌릴 수 없는 동작과 관련되는지를 하나씩 결정한다. 이 표는 디자인 규정이 되고, 고객 서비스 응대 문구, 엔지니어링 명명 규칙, 신규 직원 교육 자료가 된다

・아이콘은 어휘이지 장식이 아니다