인터랙션 디자인

화면을 그림으로만 주고받던 시절이 길었습니다. 디자이너가 화면 한 장을 그려 넘기면 개발자가 그대로 만들었는데, 그림에는 눌렀을 때 무슨 일이 일어나는지가 적혀 있지 않았습니다. 버튼이 놓인 자리와 색은 정해져 있는데 누른 다음의 0.5초는 비어 있었던 셈입니다. 그 빈자리는 만드는 사람이 그때그때 메웠고, 그래서 같은 제품 안에서도 화면마다 반응이 달랐습니다.

페이지덱 초기 화면이 그랬습니다. 문서를 쓰다가 저장을 누르면 아무 표시도 나오지 않았습니다. 저장은 실제로 되고 있었지만 화면이 그대로였으니, 사람들은 3초 안에 한 번 더 눌렀습니다. 같은 문서가 두 번 저장됐고 목록에 같은 제목이 나란히 남았습니다. 수아에게 들어온 문의는 저장이 안 된다는 것이었는데, 태오가 기록을 보면 저장은 두 번 다 성공해 있었습니다. 고장 난 것은 기능이 아니라 답이 없는 0.5초였습니다.

민서가 그 자리에 넣은 것은 새 기능이 아닙니다. 누른 순간 버튼을 회색으로 바꿔 더 못 누르게 하고, 그 옆에 저장 중이라는 글자를 띄우고, 끝나면 저장됨으로 바꾸는 것이 전부였습니다. 중복 저장 문의는 그다음 주에 사라졌습니다.

인터랙션 디자인은 이 0.5초를 설계 대상으로 끌어올린 영역입니다. 어떤 요소가 눌릴 수 있게 생겼는지, 누른 직후에 무엇이 보이는지, 기다리는 동안 무엇을 알려 주는지, 잘못 눌렀을 때 되돌릴 수 있는지를 화면을 그리는 단계에서 함께 정합니다. 화면이 몇 장이냐가 아니라 그 사이에서 사람이 무엇을 하고 제품이 무엇으로 답하느냐를 다룬다는 점에서, 정지된 그림을 다루는 작업과 갈립니다.

바로 위에 놓인 정보 구조와도 역할이 다릅니다. 정보 구조가 무엇을 어디에 둘지 정하는 뼈대라면, 인터랙션 디자인은 그 자리에 놓인 것을 사람이 실제로 건드렸을 때 벌어지는 일을 정합니다. 둘 중 하나만 맞아도 제품은 쓰기 어려워집니다.

이 이름 아래 묶인 말은 여섯 갈래입니다. 사람이 어디를 거쳐 가는지가 흐름이고, 왜 그렇게 설계하는지의 근거가 원리이며, 그 근거 중 수치로 굳은 것이 법칙입니다. 한 요소가 상황마다 달라지는 모습이 상태이고, 그 달라짐을 눈에 보이게 만드는 것이 모션이며, 사람이 무엇으로 조작하는지가 입력입니다.

흐름은 화면 한 장이 아니라 여러 장을 잇는 갈래입니다. 셋이 있고, 다루는 범위가 서로 다릅니다.

1. 유저 플로우 — 사람이 목적을 이루기까지 지나는 화면과 갈림길을 전부 그린 경로입니다. 가입부터 첫 문서를 공유하기까지를 한 장에 펼치면 중간에 로그인 여부로 갈리는 지점, 결제 정보가 없어 막히는 지점이 드러납니다. 화면별로 나눠 보면 보이지 않던 구멍이 이렇게 이어 놓으면 보입니다.
2. 태스크 플로우 — 갈림길을 걷어내고 과업 하나를 끝내는 단일 경로만 남긴 것입니다. 문서를 공유한다는 과업 하나가 몇 단계로 끝나는지를 세는 데 씁니다. 다섯 단계짜리를 셋으로 줄이는 식의 판단이 여기서 나옵니다.
3. 해피 패스 — 아무 문제도 생기지 않았을 때 흘러가는 기본 경로입니다. 시안은 대개 이 경로만 그려져 있고, 사고는 이 경로 밖에서 납니다. 파일이 용량을 넘거나 연결이 끊기거나 권한이 없는 경우가 빠져 있으면 그 자리는 만드는 사람이 채우게 됩니다.

원리는 판단의 근거가 되는 갈래이고 다섯이 있습니다.

4. 어포던스 — 생김새만으로 무엇을 할 수 있는지 짐작하게 하는 성질입니다. 손잡이가 달린 문은 당기고 판판한 판이 붙은 문은 미는 것이 그 예입니다. 화면에서는 눌리게 생긴 것과 그냥 글자인 것을 사람이 설명 없이 구분할 수 있느냐로 나타납니다.
5. 시그니파이어 — 조작할 수 있다는 사실을 알려 주려고 일부러 붙인 단서입니다. 어포던스가 물건의 성질이라면 이쪽은 설계자가 얹은 표시입니다. 화면에는 손잡이 같은 물리적 단서가 없어서 테두리와 그림자, 밑줄, 손가락 모양 커서 같은 표시로 대신합니다.
6. 멘탈 모델 — 사용자가 머릿속에 그려 둔 작동 방식입니다. 폴더를 현실의 서류철처럼 여기는 사람은 문서를 옮기면 원래 자리에서 사라진다고 기대합니다. 제품이 복사본을 남기는 쪽으로 만들어져 있으면 그 기대가 깨지고, 사람들은 제품이 고장 났다고 말합니다.
7. 피드백 — 조작에 대한 반응을 그 자리에서 알려 주는 것입니다. 페이지덱의 저장 버튼 사례가 여기 해당합니다. 반응을 얼마나 빨리 돌려줘야 하는지에는 도허티 임계라는 기준이 있는데, 0.4초 안에 답이 오면 사람이 하던 생각을 놓지 않는다는 내용입니다.
8. 점진적 노출 — 필요한 때에만 정보를 단계적으로 드러내는 방식입니다. 문서 공유 화면에 처음 보이는 것은 링크 복사 하나뿐이고, 권한을 세밀히 나누는 설정은 더 보기를 눌러야 나옵니다. 열 명 중 아홉이 쓰지 않는 기능을 첫 화면에서 빼는 판단입니다.

법칙은 원리 중 사람의 한계가 수치나 경향으로 굳은 갈래이고 여섯이 있습니다.

9. 피츠의 법칙 — 목표가 크고 가까울수록 빨리 누른다는 법칙입니다. 자주 쓰는 버튼을 크게 만들고 손이 닿는 자리에 두는 근거가 됩니다. 반대로 삭제처럼 되돌리기 어려운 것을 작게 만들고 멀리 두는 것도 같은 법칙의 응용입니다.
10. 힉의 법칙 — 선택지가 많을수록 고르는 시간이 길어진다는 법칙입니다. 요금제를 일곱 개 늘어놓으면 세 개일 때보다 결제까지 오래 걸립니다.
11. 밀러의 법칙 — 사람이 한 번에 붙잡고 있을 수 있는 항목이 일곱 개 안팎이라는 법칙입니다. 메뉴와 단계를 묶어서 보여 주는 근거로 쓰입니다.
12. 야콥의 법칙 — 사용자는 다른 사이트에서 익힌 방식이 여기서도 통할 것으로 기대한다는 법칙입니다. 로고를 누르면 첫 화면으로 간다는 약속을 깨면 새롭다는 인상보다 헤맨다는 인상이 먼저 남습니다.
13. 도허티 임계 — 반응이 0.4초 안에 오면 몰입이 끊기지 않는다는 기준입니다. 실제로 그 안에 끝내기 어려운 작업이 많아서, 끝난 척이라도 먼저 보여 주는 설계가 여기서 나옵니다.
14. 게슈탈트 원리 — 가까이 놓인 것과 닮은 것을 사람이 한 덩이로 묶어 본다는 지각 원리입니다. 항목 사이 여백만 조절해도 묶음이 달라 보이는 이유가 여기 있습니다.

남은 세 갈래는 하나씩입니다. UI 상태는 같은 요소가 상황에 따라 달라지는 모습을 가리킵니다. 버튼 하나에 기본·누르는 중·비활성·로딩이 있고, 목록 하나에 내용이 있는 상태·비어 있는 상태·불러오는 중·실패한 상태가 있습니다. 시안에 기본만 그려져 있으면 나머지는 만드는 사람이 정하게 되고, 그래서 어떤 화면은 빈 목록에 아무것도 안 뜨고 어떤 화면은 오류 문구가 뜹니다.

모션 디자인은 그 상태들 사이의 변화를 움직임으로 설명하는 갈래입니다. 열린 창이 어디에서 나왔는지, 지운 항목이 어디로 갔는지를 0.2초짜리 움직임으로 알려 줍니다. 목적이 장식이 아니라 설명이라는 점이 이 갈래의 기준선입니다.

제스처는 탭·스와이프·길게 누르기처럼 손동작으로 하는 조작을 다룹니다. 화면에 흔적이 남지 않는 조작이라 발견되기 어렵다는 약점이 있어서, 같은 일을 할 수 있는 버튼을 함께 두는 판단이 따라붙습니다. 드래그 앤 드롭과 무한 스크롤도 이 입력 갈래에 들어갑니다. 끌어다 놓는 조작은 순서를 바꾸는 일에 직관적이지만 손이 떨리는 사람과 마우스를 쓰지 않는 사람에게는 어렵고, 끝없이 이어 붙이는 목록은 훑어보기에 편하지만 스무 번째 항목으로 다시 돌아가기가 어렵습니다.

여섯 갈래는 한 줄로 이어집니다. 흐름이 어디를 지나는지 정하면, 원리와 법칙이 각 지점에서 무엇을 어떻게 보일지의 근거가 되고, 상태가 그 화면이 가질 수 있는 모습을 빠짐없이 펼치고, 모션이 그 사이를 잇고, 입력이 사람이 실제로 손을 대는 방식을 정합니다.

"이 버튼 누른 다음이 시안에 없어요. 누르면 어떻게 되나요?"

정지된 화면만 받았고 반응이 정해지지 않았다는 말입니다. 이대로 만들면 반응을 개발자가 정하게 됩니다.

"빈 상태랑 실패했을 때 시안도 같이 주세요."

내용이 있는 경우만 그려져 있으니 나머지 상태를 채워 달라는 요청입니다.

"여기 어포던스가 약해요. 눌리는 건지 아무도 모를 것 같은데요."

생김새만으로는 조작할 수 있다는 것이 드러나지 않으니 표시를 더 붙이자는 뜻입니다.

페이지덱에서 이 말이 가장 자주 오가는 자리는 민서와 태오가 시안을 함께 보는 회의입니다. 민서가 화면을 띄우면 태오는 화면이 아니라 화면 사이를 묻습니다. 이 목록이 비어 있으면 무엇이 보이는지, 파일이 20메가를 넘으면 어디에 무슨 문구가 뜨는지, 공유 링크를 만드는 동안 버튼이 어떤 모습인지 같은 질문입니다.

답이 시안에 없으면 그 자리에서 정합니다. 정하지 않고 넘어가면 태오가 구현하면서 정하게 되고, 그렇게 정해진 화면은 다음 분기에 다른 디자이너가 열어 보고 왜 여기만 다르냐고 묻게 됩니다. 민서가 시안 파일에 상태별 화면을 따로 만들어 두기 시작한 것도 이 회의를 몇 번 겪은 다음입니다.

화려한 움직임을 넣는 일로 여기는 경우가 가장 흔합니다. 사례로 도는 것이 대개 눈에 띄는 애니메이션이라 그렇게 보입니다. 하지만 이 영역이 실제로 다루는 것의 대부분은 움직임이 아니라 답입니다. 누른 것이 눌렸다고 알려 주고, 기다리는 중이라고 알려 주고, 실패했으면 무엇 때문인지 알려 주는 쪽이 먼저입니다. 순서를 뒤집으면 넘어가는 장면은 부드러운데 저장이 됐는지는 알 수 없는 제품이 나옵니다.

화면을 다 그린 뒤 마지막에 붙이는 단계로 여기는 오해도 잦습니다. 시안이 먼저 나오고 그 위에 반응을 얹는 순서로 일해 온 팀에서는 자연스러운 이해입니다. 실제로는 반응을 정하는 과정에서 화면 자체가 바뀝니다. 실패했을 때 무엇을 보여 줄지 정하려면 그 문구가 들어갈 자리가 필요하고, 자리가 없으면 화면을 다시 짜야 합니다. 마지막에 미뤄 두면 이미 개발이 시작된 뒤에 그 사실을 알게 되고, 그때는 문구를 안내창으로 띄우는 식의 임시방편이 붙습니다. 그렇게 붙은 임시방편은 대개 그대로 남습니다.