출제기준 세세항목: 감성공학 · UI 설계 도구
UI 요구사항을 확인했다면 이제 그것을 실제 화면으로 옮길 차례입니다. 어떤 화면이 몇 개 필요한지, 각 화면에 무엇을 어디에 둘지, 화면 사이를 어떤 순서로 오가는지, 그리고 어떤 색과 모양으로 보여 줄지를 정하는 것이 UI 설계입니다.
설계는 보통 큰 흐름에서 작은 부분으로 내려갑니다. 먼저 사용자가 목적을 이루기까지 거치는 화면 흐름을 잡고, 그다음 화면마다 요소의 배치를 정하고, 마지막으로 색·글꼴·아이콘 같은 시각 디자인을 입힙니다. 중간중간 사용자에게 보여 주고 반응을 확인하며 고쳐 나가는 반복이 중요합니다.
이 과정에서 두 가지를 함께 챙겨야 합니다. 하나는 '쓰기 편한가'라는 사용성이고, 다른 하나는 '쓰면서 어떤 느낌을 받는가'라는 감성입니다. 앞의 것을 확인하는 데 설계 도구와 사용성 평가가, 뒤의 것을 다루는 데 감성공학이 쓰입니다.
UX(User Experience, 사용자 경험)는 사용자가 제품이나 서비스를 쓰는 동안 겪고 느끼는 모든 것을 말합니다. 앱을 처음 설치할 때의 기대, 원하는 메뉴를 찾는 과정, 결제가 끝났을 때의 안도감, 나중에 다시 떠올렸을 때의 인상까지 포함합니다. UI는 이런 경험이 일어나는 접점이므로, 좋은 UI는 좋은 UX를 만드는 중요한 수단입니다.
UX에는 시험에 나오는 세 가지 특성이 있습니다. 주관성은 같은 화면이라도 사람마다 느끼는 경험이 다르다는 뜻입니다. 정황성은 같은 사람이라도 언제, 어디서, 어떤 상황에서 쓰느냐에 따라 경험이 달라진다는 뜻입니다. 지하철에서 한 손으로 쓸 때와 책상 앞에서 쓸 때는 편하다고 느끼는 화면이 다릅니다. 총체성은 경험이 화면 하나가 아니라 사용 전체를 통틀어 종합적으로 만들어진다는 뜻입니다.
UX를 좋게 만들려면 결국 '쓰기 편함'과 '좋은 느낌'이 함께 있어야 합니다. 쓰기는 편한데 차갑고 불안한 느낌을 주는 서비스도 있고, 보기에는 멋진데 원하는 일을 끝내기 어려운 서비스도 있습니다. 감성공학은 이 가운데 '느낌'을 설계 대상으로 끌어오는 분야입니다.
감성공학은 사람이 제품을 보고 만지고 쓰면서 느끼는 감성, 예를 들어 '고급스럽다', '믿음직하다', '귀엽다', '답답하다' 같은 느낌을 측정하고 분석해 그 결과를 제품 설계에 반영하는 기술입니다. 막연한 취향으로 여겨지던 느낌을 데이터로 다뤄, 원하는 느낌을 주는 설계를 의도적으로 만들어 내려는 것이 핵심입니다.
느낌을 재는 방법은 크게 두 갈래입니다. 하나는 사람에게 직접 묻는 방법으로, '차갑다-따뜻하다', '복잡하다-단순하다'처럼 뜻이 반대인 형용사 짝을 주고 몇 점 정도로 느끼는지 고르게 하는 설문이 대표적입니다. 다른 하나는 몸의 반응을 재는 방법으로, 심장 박동, 땀, 뇌파, 시선이 머무는 곳 같은 생체 신호를 측정합니다. 말로 하는 대답과 몸의 반응을 함께 보면 더 믿을 만한 결과를 얻을 수 있습니다.
이렇게 모은 결과로 '어떤 디자인 요소가 어떤 느낌을 만드는가'를 연결합니다. 예를 들어 둥근 모서리와 밝은 색이 친근함과, 넉넉한 여백과 절제된 색이 고급스러움과 이어진다는 식의 관계를 찾아내고, 원하는 느낌이 나오도록 색, 형태, 소리, 움직임 같은 요소를 고릅니다.
감성공학은 인간공학과 자주 비교됩니다. 인간공학은 사람의 신체적·인지적 특성에 맞춰 편하고 안전하게 쓸 수 있도록 설계하는 데 초점을 둡니다. 손에 잘 맞는 손잡이 크기, 실수하기 어려운 버튼 배치가 그 예입니다. 감성공학은 여기에 더해 '쓰면서 어떤 기분이 드는가'를 설계 목표로 삼는다는 점이 다릅니다.
UI에서 감성은 생각보다 작은 곳에서 만들어집니다. 버튼을 눌렀을 때 살짝 눌리는 듯한 움직임, 일을 마쳤을 때 나오는 짧은 효과음과 축하 문구, 기다리는 동안 보여 주는 진행 표시가 모두 사용자의 기분에 영향을 줍니다. 같은 기능이라도 이런 요소에 따라 '답답하다'와 '매끄럽다'가 갈립니다.
서비스의 성격에 맞는 느낌을 고르는 것도 중요합니다. 은행 앱은 안정감과 신뢰를 주는 차분한 색과 정돈된 배치를, 어린이 학습 앱은 즐거움을 주는 밝은 색과 큼직한 그림을 고르는 식입니다. 문구의 말투도 감성 요소입니다. '입력값 오류'보다 '전화번호를 다시 확인해 주세요'가 훨씬 부드럽게 느껴집니다.
다만 느낌을 살리려다 사용성을 해치면 안 됩니다. 화려한 움직임이 너무 길면 기다림이 되고, 분위기를 위해 글자 대비를 낮추면 읽기 어려워집니다. 감성 설계도 사용자 테스트로 실제 반응을 확인하며 조절해야 합니다.
UI 설계 도구는 머릿속 화면을 눈에 보이는 형태로 꺼내, 만들기 전에 서로 확인하고 고쳐 볼 수 있게 해 주는 산출물과 방법을 말합니다. 각 도구는 실제 완성 화면과 얼마나 비슷한지, 즉 충실도가 다르고 확인하려는 목적도 다릅니다.
와이어프레임은 화면에 어떤 요소가 어디에 놓이는지를 선과 상자로만 표시한 뼈대 그림입니다. 색이나 이미지는 넣지 않고 '여기에 로고, 여기에 검색창, 여기에 상품 목록'처럼 배치와 구조만 보여 줍니다. 충실도가 낮은 대신 빠르게 그리고 쉽게 고칠 수 있어, 구조를 두고 의견을 나눌 때 좋습니다. 손으로 그려도 되고, 화면 설계용 프로그램으로 그려도 됩니다.
목업은 실제 화면과 거의 비슷하게 색, 글꼴, 아이콘, 이미지까지 입힌 정적인 디자인 시안입니다. 겉모습은 완성품에 가깝지만 눌러도 움직이지 않는 그림이라는 점이 특징입니다. '완성되면 이렇게 보입니다'를 보여 주고 시각 디자인을 확정하는 데 씁니다.
스토리보드는 화면 배치 그림에 각 요소의 기능 설명, 화면 사이의 이동 흐름, 입력 규칙과 수정 이력까지 덧붙인 화면 설계 문서입니다. 와이어프레임이 '어디에 무엇이 있나'를 보여 준다면, 스토리보드는 '그것이 어떻게 동작하고 어디로 이어지나'까지 적어 개발자가 그대로 보고 구현할 수 있게 합니다.
프로토타입은 실제로 눌러 보고 화면을 넘겨 보며 흐름과 사용감을 확인할 수 있게 만든 견본입니다. 종이에 화면을 그려 사람이 손으로 바꿔 끼우며 보여 주는 페이퍼 프로토타입처럼 충실도가 낮은 것도 있고, 디자인 프로그램이나 코드로 실제 앱과 거의 같게 움직이도록 만든 충실도가 높은 디지털 프로토타입도 있습니다. 실제 사용자에게 써 보게 하고 막히는 곳을 찾는 데 쓰이며, 만들기 전에 문제를 발견할수록 고치는 비용이 적게 듭니다.
유스케이스는 사용자(액터)가 시스템을 통해 이루려는 일을 사용자 관점에서 정리한 것입니다. '회원이 상품을 주문한다', '관리자가 재고를 등록한다'처럼 누가 무엇을 하는지를 적고, 이를 그림으로 나타낸 것이 유스케이스 다이어그램입니다. 어떤 화면이 필요한지 빠짐없이 찾아내는 출발점이 됩니다.
이 도구들은 반드시 정해진 순서로 거치는 단계가 아닙니다. 프로젝트에 따라 와이어프레임에서 바로 높은 충실도의 프로토타입으로 가기도 하고, 목업 없이 스토리보드만으로 개발하기도 합니다. 시험에서는 각 도구가 무엇인지와 충실도·목적의 차이를 구분할 수 있으면 됩니다.
설계한 UI가 정말 쓰기 편한지는 실제 사용자에게 써 보게 해야 알 수 있습니다. 이를 사용성 평가라고 하며, 사용자가 과제를 끝내는 데 걸린 시간, 실수 횟수, 도중에 막힌 곳, 만족도 등을 살펴봅니다.
사용자가 막히는 지점은 크게 두 가지로 설명합니다. 실행 차(Gulf of Execution)는 사용자가 하고 싶은 일은 분명한데 그것을 하려면 무엇을 눌러야 하는지 알기 어려운 상태입니다. 평가 차(Gulf of Evaluation)는 무언가를 눌렀는데 그 결과가 제대로 된 것인지 화면만 보고 알기 어려운 상태입니다.
실행 차를 줄이려면 할 수 있는 동작이 눈에 잘 보이고 이름이 분명해야 합니다. 평가 차를 줄이려면 누른 즉시 상태 변화나 완료 메시지 같은 피드백을 보여 줘야 합니다. 앞에서 본 UI 원칙의 직관성, UI 지침의 가시성·결과 예측 가능과 같은 방향의 이야기입니다.
배달 앱의 주문 화면을 만들면서 먼저 종이에 와이어프레임을 그려 팀원끼리 배치를 맞췄습니다. 그다음 페이퍼 프로토타입으로 사용자 다섯 명에게 주문을 시켜 보니, 다들 '옵션 선택'을 찾지 못했습니다. 배치를 고친 뒤 높은 충실도의 프로토타입으로 다시 확인하고 나서야 개발을 시작해, 출시 후 고칠 일을 크게 줄였습니다.
건강관리 앱의 메인 색을 정하려고 후보 시안 세 개를 보여 주고 '차갑다-따뜻하다', '불안하다-안심된다' 같은 형용사 짝에 점수를 매기게 했습니다. 가장 '안심된다'는 점수가 높은 시안을 골라, 서비스가 주고 싶은 느낌을 데이터에 근거해 정할 수 있었습니다.
설정 화면에서 '저장'을 눌러도 아무 변화가 없어, 사용자가 여러 번 누르거나 저장됐는지 몰라 다시 입력하는 일이 많았습니다. 누르면 버튼이 잠시 '저장됨'으로 바뀌고 짧은 알림이 뜨도록 고치자 중복 입력 문의가 사라졌습니다. 결과를 바로 알려 주어 평가 차를 줄인 예입니다.