출제기준 세세항목: UI 표준 · UI 지침 · 스토리보드
UI(User Interface, 사용자 인터페이스)는 사람이 시스템을 다루기 위해 마주하는 모든 접점입니다. 화면의 버튼과 입력창은 물론, 키보드로 치는 명령어, 스피커에서 나오는 안내 음성도 UI에 속합니다. 사용자는 시스템 안쪽을 볼 수 없으니, 결국 UI가 곧 그 시스템의 얼굴이 됩니다.
UI는 다루는 방식에 따라 나눠 부릅니다. CLI(Command Line Interface)는 글자로 명령을 입력하는 방식이고, GUI(Graphical User Interface)는 아이콘·메뉴·창 같은 그래픽 요소를 마우스나 손가락으로 조작하는 방식입니다. NUI(Natural User Interface)는 터치, 몸짓, 말처럼 사람에게 자연스러운 행동으로 조작하는 방식입니다. 이 밖에 음성으로 주고받는 VUI(Voice User Interface), 휘어지는 화면이나 사물 표면처럼 물체 자체가 입력과 출력을 함께 맡는 OUI(Organic User Interface)도 시험 용어로 알아 두면 좋습니다.
UI는 한번 만들어 사용자에게 내놓으면 고치기가 생각보다 어렵습니다. 화면 하나를 바꾸면 연결된 기능, 안내 문서, 사용자 습관까지 함께 흔들리기 때문입니다. 그래서 그리기 전에 '누가, 무엇을 하려고, 어떤 환경에서' 쓰는지 요구사항부터 확인하고, 모든 화면이 따를 규칙(UI 표준)과 만들 때 지킬 기준(UI 지침)을 먼저 세운 다음, 그것을 스토리보드라는 설계 문서로 옮깁니다.
좋은 UI인지 판단할 때 기준이 되는 네 가지 원칙이 있습니다. 이름이 그대로 시험에 나오니 정확히 기억해 두세요.
직관성은 처음 보는 사람도 설명 없이 쉽게 알아보고 쓸 수 있어야 한다는 원칙입니다. 휴지통 모양 아이콘을 보면 누구나 '지우기'를 떠올리는 것처럼, 보는 순간 뜻이 통해야 합니다. 유효성은 화면이 보기 좋은지보다, 사용자가 하려던 일을 실제로 끝까지 해내고 원하던 결과를 얻을 수 있는지를 따지는 원칙입니다. 아무리 예뻐도 주문 버튼을 찾지 못해 결제를 마치지 못한다면 유효성이 낮은 UI입니다.
학습성은 처음 쓰는 사람도 금방 익히고, 한 번 익힌 사용법을 오래 기억할 수 있어야 한다는 원칙입니다. 유연성은 사용자의 다양한 요구와 사용 방식을 받아 주면서, 실수가 애초에 덜 일어나게 하고(오류 최소화) 일어난 실수는 되돌리거나 바로잡을 수 있게 해야 한다는 원칙입니다. 잘못된 형식을 입력하기 전에 막아 주는 입력 칸, 실행 취소 버튼, '정말 삭제할까요?' 확인 창이 유연성을 돕는 장치입니다.
외울 때는 '직관-유효-학습-유연'을 '처음 봐도 알고, 목적을 이루고, 금방 배우고, 실수를 받아 준다'로 풀어 기억하면 헷갈리지 않습니다.
UI 표준은 한 시스템 안의 모든 화면이 공통으로 따라야 하는 규칙을 정리한 것입니다. 화면을 여러 사람이 나눠 만들어도 마치 한 사람이 만든 것처럼 보이고 동작하게 하는 것이 목적입니다.
표준에는 보통 이런 내용이 들어갑니다. 화면을 어떤 영역(머리글, 메뉴, 본문, 바닥글)으로 나누고 어디에 무엇을 둘지 정하는 화면 구성 규칙, 메뉴와 화면 사이를 어떻게 오가는지 정하는 이동(내비게이션) 규칙, 버튼과 입력창 같은 요소의 모양과 위치, 색상과 글꼴, 같은 뜻에는 같은 말을 쓰도록 정한 용어 규칙, 안내·경고·오류 메시지의 형식 등입니다.
표준이 있으면 사용자는 한 화면에서 익힌 사용법을 다른 화면에서도 그대로 쓸 수 있고, 개발자는 화면마다 처음부터 고민하지 않아도 됩니다. '저장' 버튼이 어떤 화면에서는 오른쪽 아래에, 어떤 화면에서는 왼쪽 위에 있다면 사용자는 매번 버튼을 찾아 헤매게 됩니다.
UI 표준은 회사나 프로젝트가 새로 정하기도 하지만, 웹 접근성 지침처럼 바깥에 이미 있는 표준을 참고해 맞추는 경우도 많습니다. 공공기관 사이트라면 접근성 관련 기준을 지키는 것이 요구사항에 들어가기도 합니다.
UI 지침은 UI를 설계하고 개발하는 과정에서 지켜야 할 세부 기준과 제약을 말합니다. 표준이 '모든 화면이 이렇게 생기고 이렇게 움직인다'는 공통 규칙이라면, 지침은 '화면을 만들 때 이런 점을 지켜야 한다'는 작업 기준에 가깝습니다. 둘을 명확히 가르기 어려운 부분도 있지만, 표준은 결과물이 맞춰야 할 틀, 지침은 만드는 사람이 따를 기준이라고 구분하면 이해하기 쉽습니다.
흔히 지침에 담는 항목은 다음과 같습니다. 사용자 중심(만드는 사람이 아니라 쓰는 사람 입장에서 설계), 일관성(같은 동작은 같은 방식으로), 단순성(꼭 필요한 요소만 두어 부담 줄이기), 결과 예측 가능(누르기 전에 무슨 일이 생길지 짐작할 수 있게), 가시성(중요한 기능과 현재 상태가 눈에 잘 띄게), 표준화(정해진 표준과 관례 따르기), 접근성(나이, 장애, 기기 환경과 관계없이 쓸 수 있게), 명확성(뜻이 헷갈리지 않게), 오류 발생 해결(오류가 나면 무엇이 잘못됐고 어떻게 고치면 되는지 알려 주기)입니다.
지침에는 개발 환경에서 오는 제약도 들어갑니다. 지원해야 하는 브라우저와 화면 크기, 화면이 뜨기까지 허용되는 시간, 사용할 수 있는 글꼴과 라이선스 같은 것들입니다. 이런 제약을 미리 적어 두지 않으면, 화면을 다 만든 뒤에야 휴대폰에서 깨진다는 사실을 알게 됩니다.
UI 요구사항은 사용자를 만나 묻고(인터뷰, 설문), 실제로 일하는 모습을 지켜보고(관찰), 지금 쓰는 시스템과 문서를 살펴보는(기존 시스템 분석) 방법으로 모읍니다. 이때 '무엇을 할 수 있어야 하는가'라는 기능 요구와 함께 '얼마나 빠르고 편하고 안전해야 하는가'라는 비기능 요구도 함께 챙겨야 합니다.
모은 요구사항은 몇 가지 관점으로 나눠 정리하면 빠진 것이 잘 보입니다. 화면에서 다룰 데이터가 무엇인지(데이터 요구), 사용자가 화면에서 어떤 동작을 하는지(기능 요구), 사용하기 쉬움이나 반응 속도처럼 품질에 관한 요구(제품·서비스 품질), 일정·비용·기술 환경처럼 지켜야 할 조건(제약 사항)입니다.
정리한 요구사항은 화면 단위로 묶어 보고, 앞서 세운 UI 표준과 지침에 어긋나지 않는지 검토합니다. 그다음 사용자와 함께 확인해 확정합니다. 이렇게 확정된 내용이 다음 단계인 스토리보드 작성의 재료가 됩니다.
스토리보드는 화면 하나하나의 구성과 각 요소의 기능, 그리고 화면 사이를 어떻게 이동하는지를 한 문서에 정리한 화면 설계서입니다. 영화를 찍기 전에 장면을 칸마다 그려 흐름을 맞춰 보는 영화 제작의 스토리보드(현장에서는 흔히 '콘티'라고 부릅니다)와 같은 발상입니다. 기획자, 디자이너, 개발자가 같은 문서를 보며 '이 버튼을 누르면 어디로 가고 무엇이 저장되는가'를 맞춰 보는 공동 기준이 됩니다.
스토리보드 한 장에는 보통 화면 이름과 고유 번호(화면 ID), 화면의 배치를 그린 그림, 각 요소 옆에 번호를 붙여 적은 기능 설명, 버튼이나 링크를 눌렀을 때 넘어가는 화면, 입력값을 검사하는 규칙과 오류 메시지, 그리고 언제 무엇이 바뀌었는지 남기는 수정 이력이 들어갑니다. 화면 배치 그림 부분에는 흔히 와이어프레임을 씁니다.
스토리보드와 함께 자주 나오는 용어로 와이어프레임, 목업, 프로토타입이 있습니다. 와이어프레임은 선과 상자로 요소의 위치만 잡은 뼈대 그림이고, 목업은 색과 글꼴, 이미지까지 입혀 실제 화면과 비슷하게 만든 정적인 디자인 시안이며, 프로토타입은 실제처럼 눌러 보며 흐름을 확인할 수 있게 만든 견본입니다. 이들은 정해진 순서로 이어지는 단계라기보다, 실제 화면과 얼마나 비슷한가(충실도)와 무엇을 확인하려는가가 다른 도구입니다. 프로토타입도 종이에 그려 손으로 넘겨 보는 낮은 충실도부터 실제 앱과 거의 같은 높은 충실도까지 다양합니다. 이 도구들은 'UI 설계'에서 더 자세히 다룹니다.
사내 업무 시스템에서 '저장' 버튼이 어떤 화면은 위에, 어떤 화면은 아래에 있어 문의가 많았습니다. UI 표준에 '확정 동작 버튼은 본문 오른쪽 아래, 취소는 그 왼쪽'이라는 규칙을 넣고 모든 화면을 맞추자, 사용자가 화면마다 버튼을 찾는 일이 사라졌습니다.
회원가입 스토리보드에 화면 ID, 입력칸 배치, 각 입력칸 옆 번호별 설명(예: 비밀번호 8자 이상, 틀리면 칸 아래 빨간 글씨로 안내), '가입' 버튼을 누르면 이동할 완료 화면을 적어 두었습니다. 디자이너와 개발자가 같은 문서를 보고 작업하니, 오류 문구나 이동 화면을 두고 따로 묻는 일이 크게 줄었습니다.
결제 실패 시 '오류가 발생했습니다'만 보여 주던 화면을 '카드 유효기간이 지났습니다. 다른 카드를 선택해 주세요'처럼 원인과 해결 방법을 함께 알려 주도록 바꿨습니다. 사용자는 고객센터에 묻지 않고도 스스로 문제를 해결할 수 있게 되었습니다.