모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가 보고 싶어하지 않는 정보에 강제로 집중하게 만드는 장치였습니다. 공급자가 보여주고 싶은 정보를 보게하는 용도로 많이 쓰였습니다. 모바일 시대로 들어서면서 인터넷이 불안정하고 기기 성능이 떨어졌기 때문에 움직임은 거의 사용되지 않았습니다. 이제는 모바일 관련 기술이 발달하면서 서비스에 움직임을 적용하는 난이도도 낮아졌습니다. 여전히 보여주고 싶은 정보를 강조하는데 쓰이고 있지만, 사용자를 위한 적절한 움직임을 제공하려는 노력이 점차 늘고 있습니다.
청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전할 수 있습니다. 또한 우리가 경험하는 실제 세계에는 ‘가만히 있는’ 것은 절대 없기 때문에 움직임으로 자연스러움 한 스푼을 더해줄 수 있습니다. 평면 스크린에서 자연스러움을 묘사하는 마지막 조각이라 볼 수도 있습니다. 여기에 더해 나의 행동에 따라 반응한다면 추상적인 시각 요소가 물리적인 세계에 정말로 존재한다는 느낌을 전합니다.
움직임의 용도
주목하고 기다리기
움직임은 사용자가 집중하게 만듭니다. 다른 시각 기법들보다 움직이는 요소에 가장 먼저 눈길이 갑니다. 정적인 요소는 눈과 뇌가 정보를 처리하는 속도가 빠르지만, 동적인 요소는 집중력이 떨어질 때까지 시선이 머무는 편입니다. 움직임 정보를 처리하는 동안 시간을 느끼지 못해 기다리는 시간을 짧게 느끼게 도울 수도 있습니다.
가상의 공간 상상하기
움직임은 서비스를 구조를 쉽게 이해할 수 있게 돕습니다. 평면의 모바일 스크린은 추상적인 공간입니다. 추상적인 공간에 구체적인 구조를 떠올릴 수 있도록 애니메이션을 활용합니다. 한정된 화면에 공간과 구조를 떠올릴 수 있도록 화면이 전환될 때 어디서 등장하는지 알려줍니다. 오른쪽에서 등장하는 애니메이션은 왼쪽에서 오른쪽으로 진행되는 구조를 상상할 수 있으며, 아래에서 튀어나왔다 작업을 마무리하고 사라지는 구조로 일시적인 작업은 아래에서 위로 잠깐 나타나는 구조를 상상할 수 있습니다.
많은 정보 순차적으로 이해하기
움직임은 적은 공간에 여러 정보를 전달하기 좋습니다. 고정되어 있을 경우 한번 표시된 정보는 특정 공간을 점유하게 됩니다. 이 때 움직임을 이용해 보이는 정보를 교체하면 짦은 시간에 여러 정보를 전할 수 있습니다. 눈이 한번에 받아들이는 정보량을 줄이고 고객이 터치나 스크롤 액션을 하지 않고 다양한 정보를 확인할 수 있는 기법입니다. 기다리지 않으면 무슨 내용이 나올지 알 수 없기 때문에 시작부터 끝까지 요소의 맥락이 연결되는 것이 좋습니다.
직관적이고 빠른 피드백 받기
움직임은 직관적으로 예측할 수 있는 피드백을 전할 수도 있습니다. 글, 사진, 이미지 시각 요소가 추가될 때마다 사용자는 정보를 해석해야 합니다. 특정 요소에서 일어나는 변화를 따로 설명하지 않고 요소 자체의 움직임만으로 전달할 수도 있습니다. 예를 들어 특정 요소를 삭제하려고 할 때, ‘실패했습니다’ ‘성공했습니다’를 텍스트나 아이콘을 추가해 정보를 전달할 수 있습니다. 하지만 여기서 시각 요소를 추가하지 않고 삭제하려는 대상에 움직임을 추가해 사용자가 시각 요소를 해석할 필요 없이 직관적으로 이해할 수 있게 도울 수 있습니다. 실패했을 때는 고개를 흔들듯 좌우로 움직이고, 성공하면 기분이 좋은듯 살짝 점프하는 것이죠.
움직임의 요소
속도
속도와 지속 시간은 상대적입니다. 1초(1,000ms) 모바일 환경을 기준으로 0.2초(200ms) ~ 0.5초(500ms)에서 시작하는 것이 좋습니다. 이 숫자는 Neilson Norman Group과 Model Human Processor에서 기반합니다. 0.1초(100ms)가 순간으로 지각되고 1초(1,000ms)가 생각할 수 있는 상한선이라고합니다. Model Human Processor 에서는 너무 짧으면 인지가 되지 않고 너무 길면 지루합니다. 웹은 실행과 연관된 애니메이션은 속도가 더 빨라야 합니다. 웹이 정상적으로 작동하지 않는다고 생각할 수도 있기 때문입니다. 또한 요소의 크기가 클수록 빨리 움직여야 합니다. 동일한 면적에서 움직여야 하는 거리가 다르기 때문입니다.
반복되는 움직임은 가속도를 주는 것이 자연스럽습니다. 같은 속도로 움직이는 것은 존재하기 어렵기 때문에 자연스럽게 느껴지지 않습니다. 빠르게 시작하고 끝에 닿을수록 서서히 느려지는 움직임이 자연스럽습니다.
등장과 퇴장 움직임은 상황에 따라 다릅니다. 요소가 등장할 때는 사용자가 기다리지 않도록 최대한 빨리 표시하는 것이 좋습니다. 퇴장할 때는 요소가 움직인다는 사실을 전한 뒤에는 최대한 빨리 사라지는 것이 좋기 때문에 사라지는 속도가 점점 빨라지는 가속도로 표현하는 것이 좋습니다.
동선
디지털 프로덕트에서 요소가 표시되는 환경과 동선을 고려해야 합니다. 움직임이 사용자의 경험 단계에서 어떤 문제를 해결해주는지 명확하게 정의하고 사용자의 목표를 달성하는 여정에 도움을 줄 수 있는 맥락을 찾아 움직임을 적용합니다. 여러 요소가 움직여 혼란스럽지 않게 우선 순위를 명확하게 하고 인지 부하가 없도록 설계합니다.
사용자가 행동하는 위치에서 움직임이 시작되는 것이 좋습니다. 예를 들어 사용자가 오른쪽에서 화면을 쓸면, 새로운 창이 오른쪽에서 등장해야 합니다. 사용자가 팝업을 띄우는 버튼을 누르면 상세한 내용을 선택하는 창이 누른 버튼에서부터 시작해서 확장되어 등장하는 것이 자연스럽습니다.
요소 등장하는 순서는 맥락에 따라 다릅니다. 모든 요소들이 순차적으로 움직임이 진행될 필요는 없으며 가급적 움직임의 량과 시간이 적을수록 좋습니다. 정보의 시작과 끝을 표현하기 위해 모든 정보를 동시에 표시하지 않을 때에도 최대한 움직이는 요소를 그룹으로 묶어 사용자가 눈으로 쫓는 동선을 최소화해야합니다.
최근 등이 약간 거슬릴 정도로 아팠습니다. 목, 허리 디스크가 있진 않지만 시간이 지날수록 의자에 앉는 것이 피곤했졌습니다. 집중할 때 이상한 자세로 몸을 베베 꼬아 입 벌리고 모니터를 보는 경우도 늘었습니다. 왜 이렇게 몸에 안 좋을 것 같은 자세는 마음이 편안하고 집중이 잘 될까요? 목, 허리 디스크가 있진 않지만 앞으로 70년 동안 리퍼도 안되는 내 몸을 생각하니 미세한 통증도 신경쓰였습니다.
하루 대부분의 시간을 앉아서 보내는 디자이너에게 앉기, 의자, 책상은 중요한 키워드입니다. 오래오래 덜 피곤하게 디자인에 집중할 수 있게 ‘건강’에 관련된 것은 꼭 투자해야겠다는 생각이 들었습니다. 좋은 의자를 고르기 위해올바른 앉기에 대해 정리해봤습니다.
P.S 좋은 의자가 있다면 꼭 댓글로 추천 부탁드립니다.
바르게 앉기
바르게 앉는다는 것은 몸의 부담을 줄인다는 것과 같은 말입니다. 몸의 부담을 줄이기 위해 신체의 각 부분을 이용하거나 의자와 책상과 같은 도구를 이용할 수 있습니다. 신체의 특정 부위에만 부담이 가지 않도록 적절하게 무게를 분산하는 법을 우리 몸을 중심으로 살펴보겠습니다.
엉덩이, 허리
앉았을 때 가장 큰 부담이 가는 신체 부위입니다. 여러 업무용 의자가 신체에 알맞게 디자인되었기 때문에 엉덩이와 허리를 의자에 밀착하는 것이 좋습니다. 90도로 꼿꼿히 서 있기보다 125도 이상으로 등을 의자 전체에 기대어 무게를 분산합니다. 허리가 앞으로 구부러지지 않도록 엉덩이가 전체 무게를 지지한다는 느낌으로 앉습니다.
다리
다리 각도가 높으면 엉덩이와 허리에 무게가 쏠리기 때문에 수평하거나 낮으면 좋습니다. 엉덩이와 무릎이 수평하고 무릎과 발이 90도로 꺾여도 좋은 자세이지만 허리가 둥글게 말리는 것을 방지하기 위해서 고관절이 무릎보다 높은 곳에 있으면 좋습니다. 발은 바닥에 밀착해 무게를 분산합니다. 다리가 꺾이는 부분은 오금이 의자에 눌리지 않도록 두 뼘정도 공간이 있으면 좋습니다.
팔
팔의 각도가 높거나 낮으면 어깨에 무게가 쏠립니다. 가급적이면 팔걸이나 책상에 수평하게 무게를 분산하는 것이 좋습니다. 팔꿈치 받침대가 없다면 책상에 조금 더 가깝게 다가가 책상에 팔 무게를 분산하면 좋습니다.
머리
의자에 헤드레스트가 있다면 위 자세를 흐트러뜨리지 않으면서 자연스럽게 머리를 기댑니다. 완전히 정중앙에 수평으로 눈높이를 맞출 경우 정면으로 모니터 빛을 많이 쐬기 때문에 눈 건강에 좋지 않다고 합니다. 고개를 숙이지 않으면서 눈을 크게 뜨지 않는 모니터의 2/3 높이에 눈높이를 맞추면 좋습니다.
이상적인 높이
적당한 의자 높이는 신장x0.25이라고 합니다. 책상은 의자 높이+(키x0.13)이 이상적이라 합니다. 키가 170일 경우 의자는 44cm, 책상은 66cm가 나오네요. 정확한 길이는 아래 링크에서 내 키를 입력하면 정확한 길이를 확인할 수 있습니다. 휴먼 솔루션 방문하기
인터페이스를 디자인할 때 종종 개발자 분께서 ‘앗 그것도 정의해주셔야 해요’라고 말씀하실 때가 많죠? 그래픽 디자인 툴을 이용해 정지된 화면을 만들다보면 다양한 경우의 수를 예측하기가 어려울 때가 많습니다. 정교하게 만든 디자인 시스템을 이용해 프로토타이핑을 해도 놓치는 부분이 생길 수 있습니다.
디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다. 가장 최고의 상태부터 가장 최악의 상태까지 촘촘하게 사용자 층을 나눠 누구나 목적을 쉽게 달성할 수 있게 돕는 길을 만드는 것이 중요합니다. 이번 글에서는 다양한 경우의 수에 대응할 수 있는 디자인을 만들기 위해 꼭 확인해야 하는 인터페이스의 20가지 속성에 대해 정리했습니다.
정보 입력
쉽게 보면 사용자가 버튼을 누르거나 글자를 입력하는 것을 입력이라 합니다. 사용자가 시스템에 정보를 보내는 행동에 대한 정의입니다.
Default: 최초 상태입니다.
Inactive: 조건에 따라 입력할 수 없는 상태입니다.
Active: 입력할 수 있는 상태입니다.
Touch Area: 상호 작용할 수 있는 범위의 크기입니다.
Type: 입력하는 정보의 종류입니다.
Action: 정보를 제출하는 행동입니다.
정보 출력
버튼을 누르면 다른 화면으로 이동하거나, 텍스트를 입력했을 때 잘못되었다고 표시하는 것들을 출력이라합니다. 사용자가 보낸 정보에 대한 시스템의 대답입니다.
Loading: 시스템으로부터 정보를 기다리는 상태입니다.
Incorrect: 정보가 틀린 상태입니다.
Correct: 정보가 맞은 상태입니다.
Fail: 진행하던 것이 실패한 상태입니다.
Success: 진행하던 것이 성공한 상태입니다.
Save: 정보를 저장하는 시점에 대한 정의입니다.
Refersh: 정보를 다시 불러오는 시점에 대한 정의입니다.
정보의 량
카드 리스트, 필터 리스트 등 여러 개의 정보를 불러올 때 상태에 대한 정의입니다. 리스트처럼 동일한 요소를 불러오는 것 뿐만 아니라 상품 카드처럼 다양한 요소가 덩어리로 묶인 경우에도 량에 대해 고려해야 합니다.
다양한 신생 기업이 크게 성장하면서 디자이너의 역할 역시 빠르게 변했습니다. 기술이 발달하면서 이전에는 할 수 없었던 것을 더 빨리 쉽게 배우고 실행할 수 있게 되었습니다. 디자이너 역시 이전에는 시간이 오래 걸리고 어려운 작업이 점차 시스템화되면서 더 큰 변화를 만들기 위해 필요한 역량이 확대되었습니다. 현재 IT 씬에서는 서비스를 만드는 데 중요한 역할을 하는 프로덕트/브랜드 전반을 두루 다룰 수 있는 프로덕트 디자이너와 브랜드 디자이너가 주로 필요합니다. 여기서 시작해 서비스의 성격과 성장 단계에 따라 필요한 디자이너로 갈라집니다. 그럼 지금부터 2022년 올해에는 어떤 디자인 직무가 있는지 정리해보겠습니다.
프로덕트 디자이너
말 그대로 프로덕트를 디자인합니다. 주로 디지털 프로덕트를 설계하는 사람을 지칭합니다. 시각적인 설계만 맡는 것으로 오해할 수 있지만, 프로덕트 디자이너는 시각적인 설계뿐만 아니라 프로덕트를 이용해 원하는 결과를 어떻게 만들 것인가에 집중하는 직군입니다. UI/UX가 결합한 것처럼, 기술이 발전하면서 다양한 구실을 할 수 있게 되어 시각 디자인, UX 연구, UI 디자인, 실험 설계, 제품 로드맵 등 실제로 사용자에게 전달되는 프로덕트의 경험에 관한 모든 역할을 맡습니다.
자신이 담당하는 프로덕트의 성공 여부로 평가받습니다. 프로덕트의 경험을 전략적 도구로 다룹니다. 해결할만한 가치가 있는 문제를 발견하고 문제를 해결할 수 있는 프로덕트를 설계하고 목표를 달성할 때까지 반복합니다. 그래서 제품을 이용해 원하는 결과를 만드는 방법에 통달해야 합니다. 데이터를 다루는 법, 가설을 검증하는 법, 제품을 설계하는 법 등 프로덕트를 운영하는 데 필요한 지식을 갖춰야 합니다.
또한 오랫동안 완벽한 기획을 준비해서 출시하지 않고, 빠르게 내보내고 고객으로부터 배우는 개발 방법론이 정착되면서 여러 가설을 최대한 빨리 많이 실행할 수 있는 것이 중요해졌습니다. 빠르게 움직이기 위해 1개의 일을 여러 명이 함께 나눠서 완벽하게 만들기보다 1명이 모든 일을 최소한의 수준으로 처리할 수 있는 역량이 필요해 졌습니다. 단순히 기능적으로 요구받는 영역만 해결하는 것으로 끝나지 않고, 함께 달성해야 할 목표를 달성하기 위해 내가 할 수 있는 모든 것을 실행해야 하는 것입니다.
더 포괄적인 관점으로 제품 중심으로 사고하는 능력이 필요합니다. 말 그대로 제품을 디자인하며 사용성이나 심미적인 면뿐만 아니라, 프로덕트가 나아갈 방향성을 설정하고 실제로 사용자에게 프로덕트를 전달할 수 있는 실행력이 필요합니다. UX와 UI 기술을 이용해 사람의 심리와 감각에 집중하는 것 뿐만 아니라 프로덕트가 속한 비즈니스 맥락도 이해해야 합니다. 이 지식을 바탕으로 앞으로 어떤 시장에 기회가 있는지 파악하고 기회를 잡기 위해 어떤 고객의 문제에 집중해야 하는지 정의하고, 고객 문제를 해결할 수 있는 제품을 설계하고, 실제로 어떻게 구현할지 계획해 성공을 만들 수 있기 때문입니다.
소규모 조직에서는 한 명이 많은 것을 담당해야 하기 때문에 최근에는 대부분 회사가 프로덕트 디자이너를 찾는 편입니다. 가끔 UX 디자이너와 비슷하게 사용하지만, 회사의 정의하는 역할에 따라 다릅니다. 제품 목표, 로드맵에 관여하는 사람은 상급생 UX 디자이너라고도 합니다. PO(Product Owner), PM(Project Manager), 개발자, 사업 매니저, 판매담당자 등 다양한 팀과 프로덕트를 개선해 나가기 위해 협업이 필수적이기 때문에 소통이 중요합니다.
서비스를 접하는 모든 사람들이 일관된 브랜드 경험을 할 수 있게 돕는 역할을 맡습니다. 서비스와 고객의 모든 접점에서의 경험을 다루죠. 브랜드는 사람들의 머릿 속에 기억되는 것이 중요합니다. 고객이 브랜드를 헷갈리지 않게 일관된 메시지를 전달하는 것이 핵심이며 이 경험을 책임지는 것이 브랜드 디자이너입니다. 이를 위해서 논리적인 기획과 구현 능력이 중요하고 시각 언어, 문자 언어 등 다양한 커뮤니케이션 방식에 대해 깊게 이해해야 합니다.
브랜드를 잘 표현해 고객과 소통할 수 있는 다양한 유/무형의 결과물을 만듭니다. 가장 먼저 브랜드 코어인 비전, 미션, 핵심 가치를 표현할 수 있는 형태로 다듬고, 이를 가장 잘 나타낼 수 있는 로고, 브랜드 컬러, 서체 등의 브랜드 아이덴티티를 만들고 관리합니다. 이 정체성의 뿌리를 바탕으로 조직과 고객 사이의 접점에 어떻게 일관되면서 인상 깊은 경험을 할 수 있는지 고민합니다. 업계마다 차이가 있지만 주로 오프라인 공간, 인쇄물, 광고, 사진/영상 콘텐츠, 웹사이트 등을 만듭니다.
측정하기 어려운 경험을 다루기 때문에 더 깊고 집요한 시각 표현 능력과 조형성에 대한 이해가 필요합니다. 기술적으로 Adobe의 포토샵, 일러스트레이션을 이용한 그래픽 디자인, 애프터 이펙트를 이용한 모션 디자인, 시네마포디, 블렌더 등을 이용한 3D 디자인, 프리미어, 베가스 등을 이용한 영상 디자인 역량 등이 필요합니다.
주로 디자인 시스템을 만드는 디자이너입니다. 해외에서는 프로덕트 디자이너: 디자인 시스템(Product Designer: Design System)라고도 지칭합니다. 주로 디자이너, 엔지니어와 함께 협업해 전체에 적용되는 표준을 만들어 일관된 디자인 언어가 적용된 효율적인 시스템을 만듭니다. 역할의 한계를 두지 않고 더 나은 디자인을 만들 수 있는 플랫폼을 위한 일을 합니다.
제품 전체의 인상을 책임지기 때문에 시각 디자인 역량이 필요합니다. 세련되고 우아한 시각 경험을 설계하기 위해 타이포그래피, 레이아웃, 색 등에 대한 깊은 이해가 필요합니다. 이를 구현하기 위한 Figma, Sketch, Adobe XD, Framer 와 같은 GUI 제작 툴에 통달해야 합니다. 더 나아가 Protopie, After Effect와 같은 인터랙션 디자인 툴에 대한 이해가 필요하기도 합니다.
다양한 환경에서 사용될 시스템을 설계하기 때문에 디자인이 구현될 플랫폼에 대한 지식도 필요합니다. 웹 환경을 이해하기 위해 HTML, CSS을 알아야 하고, 모바일 환경을 이해하기 위해 iOS, Android에 대해 자세히 알아야 합니다. 웹 WCAG 호환이나 Android의 Material Design, Apple의 Human Interface Guideline처럼 각 플랫폼에서 제공하거나 연관이 있는 표준과 가이드라인을 모두 이해해야하며 다양한 변수와 가능성에 대해 예측할 수 있어야 합니다. 고객에게 의도한 경험을 온전히 전달하기 위해 디자인 변수 뿐만 아니라 엔지니어링 변수에 대해서도 알아야 합니다.
프로덕트의 성장에 따라 시스템도 성장하기 때문에 운영하고 발전시킬 수도 있어야 합니다. 변경 사항이 생겼을 때 무엇을 언제 어떻게 시스템에 적용할지 판단할 수 있어야 합니다. 이를 위해 각 요소가 어떤 맥락에 속하며 전체에 어떤 영향을 끼치는지 예측할 수 있어야 합니다. 이 과정에서 크고 복잡한 개념을 기술적 이해가 없는 동료도 이해하기 쉽게 설명할 수 있는 능력도 필요합니다.
마지막으로 제품 전체를 조망하는 방식의 사고 방식이 필요합니다. 서비스의 브랜드 원칙을 지키면서 사용자 중심의 디자인 원칙을 적용하고 관리할 수 있어야 합니다. 재사용되는 요소를 규격화해 효율을 높이고 확장 가능한 구조를 설계할 수 있어야 합니다.
UX 디자이너는 사용자가 서비스나 제품을 사용할 때 겪는 처음부터 끝까지의 경험을 책임지는 역할을 맡습니다. 사용자가 더 큰 만족감을 얻도록 매력적이고 편리한 경험을 설계합니다. 모바일 애플리케이션부터 자동차까지 기업이 고객에게 제공하는 서비스 플랫폼에 따라 다양한 경험을 설계합니다. 고객의 경험을 설계하기 때문에 인간에 대한 이해와 플랫폼에 대한 기술적 이해가 필요합니다.
과거 UX 디자이너는 와이어프레임까지만 그리는 역할이라고 여겨졌었는데 인터페이스 디자인 허들이 낮아지면서 전반적인 설계 역할을 모두 맡습니다. 주로 소규모 비즈니스에서 제너럴하게 역할을 맡으며 UX 디자이너, UI/UX 디자이너라고 지칭합니다. UX 리서치, 문제 정의, 정보 구조, UI 디자인, 인터랙션 디자인, 프로토타이핑, 사용자 테스트 등 다양한 역할을 광범위하게 맡습니다. 디자인 팀 규모가 커지면 구성원이 전문적으로 특정 역할을 맡습니다.
경험을 설계하기 위해 먼저 사람을 이해해야 합니다. 사람의 생각을 다루는 UX를 이해하기 위해 기초적인 인지 과학, 인지 심리학, HCI에 대해 알아두면 좋습니다. 여러 학문을 통해 인간의 마음, 뇌의 원리, 몸의 동작에 대해 연구하는 학문으로 모든 것을 이해할 수 없지만 서비스를 제공하는 환경에 따라 인간이 어떤 맥락에 있는지 가늠하는 데 도움이 됩니다. 사람의 생각을 다루기 위해 데이터를 모으고 해석하고 해결할 수 있는 최고의 경험을 도출할 수 있어야 합니다. 이를 위해 UX 리서치 능력, 인사이트 도출도 할 수 있어야 합니다.
사람의 반응을 다루는 UI를 이해하기 위해 인터페이스와 인터랙션, 그리고 플랫폼에 대한 지식이 있어야 합니다. 여전히 큰 임팩트를 내는 영역은 GUI로 시각 디자인으로 소통하는 인터페이스가 주류입니다. UX 단계에서 도출한 워크 플로우나 프로토타입을 바탕으로 색, 타이포그래피, 아이콘 등의 시각 기법을 이용해 레이아웃을 제작하고, 사용자의 행동을 유도하기 위해 다양한 시각 장치를 마련하고, 사용자가 행동했을 때 프로덕트가 구체적으로 어떻게 작동하는지 기획하는 역할을 맡습니다. 여러 가지 시각 기법을 자유자재로 다룰 수 있어야 하며, 버튼, 텍스트 인풋, 라디오 버튼과 같이 보편적으로 쓰이는 컴포넌트가 어떤 기능을 하는지 명확하게 이해해야 하고, 필요하다면 새로운 컴포넌트를 만들어낼 수 있어야 합니다. 사용자가 사용할 실제 모양을 설계하는 역할로 구현을 담당하는 Front-End, iOS, Android Developer와 원활한 커뮤니케이션이 필요합니다.
UX 리서쳐는 다양한 방법으로 고객을 조사하고 연구해 새로운 기회를 발견하고 제품 로드맵에 적용할 수 있는 방향성을 제시합니다. 지금 고객으로부터 무엇을 배워야하는지 정의하고 전략적으로 어떻게 인사이트를 발견할 수 있을지 주도적으로 프로젝트를 진행합니다. 다양한 조사 결과를 내부 구성원에게 공유하고 고객에게 더 나은 경험을 줄 수 있는 인사이트를 제시합니다.
고객의 목소리를 경청하고 사용자가 원하는 것을 편견 없는 시각을 전달합니다. 사용자로부터 배운 것을 바탕으로 제품 개선으로 연결되게 하는 역할을 맡습니다. 현장 연구, 인터뷰, 저니맵, 에스노그래피, 서베이, 사용성 테스트, 로그 분석 등 고객을 연구합니다. 다양한 이해관계자가 이해할 수 있게 전달하는 일도 합니다.
정량 연구는 수치로 측정할 수 있는 방법입니다. How many, 즉 얼마나 했는지를 수치로 측정합니다. 표본 크기가 큰 연구를 실행해 통계적으로 데이터를 수집 해석. 작업 시간, 오류율, 성공률과 같은 사용성 메트릭을 수집합니다. 많은 수의 표본을 바탕으로 일반화합니다. 설문 조사, 로그 데이터 등을 통해 정보를 수집하고 • 데이터 조작 및 계산 통계에 사용되는 프로그래밍 언어(예: Python, R, MATLAB, C++, Java, Go) 경험 SQL, Python, R/SAS, Presto, Tableau 등 통계와 연관된 데이터를 다룹니다. 무슨 결과가 나왔는지 더 객관적으로 판단할 수 있습니다. 해외에서는 Quantitative UX Researcher라는 직종이 분화되기 시작했습니다.
정성 연구는 숫자로 알 수 없는 이유를 찾는 방법입니다. Why, 즉 왜 행동했는지 이해합니다. 사용자 인터뷰, 현장 연구와 같이 사용자를 직접 관찰하는 리서치입니다. 사람들의 동기, 생각, 태도를 이해하고 현상이 일어난 이유를 밝히는데 집중합니다. 사람의 마음은 정량으로만 측정할 수 없기 때문에 공감하기 위한 연구를 합니다. 사용자 인터뷰, 일기 연구, 포커스 그룹 인터뷰, 사용성 테스트 등을 진행하고 숫자로 알 수 없는 논리적 결과를 도출합니다. 해외에서는 Qalitative UX Researcher라는 직종으로 분화되기 시작했습니다.
UX 라이터는 최근 해외에서는 Contents Strategists라고도 불립니다. 프로덕트에 쓰이는 글에 집중하는 역할을 맡습니다. 사람들이 제품을 쉽게 탐색하고 문제를 해결할 수 있게 UI에 쓰이는 글을 작성합니다. 또 사용자가 원하는 페이지나 화면으로 직관적으로 이동할 수 있도록 적절한 제목과 메뉴 이름을 만들기도 합니다. 불쾌한 감정을 다독여줄 수 있는 에러 메시지를 작성하거나 이메일, 뉴스레터를 작성하기도 합니다. 제품 전체에 걸쳐 일관된 내러티브를 구성하고 일관된 목소리로 말합니다. 사용자에게 공감하고 목표를 달성할 수 있어야 합니다.
UI 디자이너가 시각 요소를 이용해 고객 경험을 설계한다면, UX 라이터는 그 중에서도 문자 언어를 이용해 고객 경험을 설계한다고 볼 수 있습니다. 모바일 UI의 경우 많은 발전을 이뤄 상당 부분 비슷한 수준의 경험을 제공합니다. 여기서 타 서비스와 다른 경험을 주기 위한 요소 중에 하나가 서비스의 사려 깊은 말투가 될 수도 있습니다. 색이나 심볼을 이용해 브랜딩을 표현하는 것보다 서비스의 말투로 브랜드 경험을 제공하는 사례도 점점 늘고 있습니다. UX 라이터로서 작문에 대한 기본적인 역량이 필요합니다. 문법, 어조에 대한 이해 뿐만 아니라 그 이상으로 어떤 뉘앙스로 말을 전달하게 될지도 명확하게 이해해야합니다.
세포가 하나 있습니다.이 세포가 모여 근육 조직이 됩니다.근육 조직이 모여 심장이 되고심장에서 혈관을 통해 몸 전체에 영양분을 전달하는 시스템이 만들어집니다.
분열하는 작은 세포에서부터 생명 유지를 위한 시스템까지. 대부분의 동물은 체세포, 조직, 기관, 시스템으로 몸이 구성됩니다. 오랜 시간 동안 환경에 적응하면서 각자의 생존 방식에 알맞게 신체의 형태도 계속해서 바뀌었죠.
프로덕트가 환경에 적응하고 생존하는 모습이 마치 생물과 같다고 생각했습니다. 어떤 프로덕트는 사냥감을 쫓을 수 있게 발이 빨라야 하고, 어떤 프로덕트는 무거운 물건을 옮길 수 있게 힘이 강해야 하죠. 상황에 따라 필요한 능력과 기관이 다르겠죠! 코끼리의 거대한 덩치, 사자의 발톱, 고양이의 귀여움처럼요.
말할 줄 모르는 이 생명체가 목소리를 가질 수 있게 UX 글쓰기로 목소리를 주고, 여러 시각 요소로 숨 쉬고 움직이는 플로우, 패턴을 만드는 과정이 마치 생명체를 만드는 것 같다는 생각이 들었습니다. 아무것도 없는 0에서부터 프로덕트라는 생명체를 만들 때 우리는 디자인 시스템을 사용합니다. 가장 유명한 디자인 시스템 방법론은 아토믹 디자인(Atomic Design)이죠. 이 개념은 브래드 프로스트(Brad Frost)가 고안한 개념으로 원자-분자-템플릿-페이지로 프로덕트를 구성하는 디자인 방법론입니다. 디자인 툴인 스케치 앱과 심볼과 피그마의 컴포넌트가 훌륭하게 기능을 제공해 이 디자인 방법론이 빠르게 성장했습니다. 저는 조금 다른 관점으로 디자인 시스템을 풀어보려 합니다. 유기적이고 진화하는 생명체의 관점으로요.
세포 – 시각 요소
가장 작은 단위인 세포입니다. 색, 공간, 서체, 아이콘 등 다양한 시각 요소가 여기에 속합니다. 눈에 보이는 형태적 특성을 뜻합니다. 조그마한 점, 구분을 위한 선 등 프로덕트를 디자인할 때 사용하는 모든 레이어가 세포라고 봐도 좋습니다.
조직 – 컴포넌트
세포가 조합되어 조직이 됩니다. 여러 시각 요소가 합쳐져 기능을 수행하는 최소 단위인 컴포넌트를 뜻합니다. 텍스트 인풋이나 체크 박스 등이 될 수 있죠. 버튼을 예시로 살펴보면 글자나 아이콘 없이 색이 있는 네모만 있다면 그것을 버튼이라고 인지할 수 없습니다. 이것이 최소 단위의 의미입니다.
기관 – 모듈
조직이 모여 독립적인 기능을 수행하는 기관이 됩니다. 컴포넌트가 합체해 모듈이 되죠. 독립된 기능을 기준으로 여러 컴포넌트가 문제를 해결하고 문제 해결의 덩어리를 모듈이라 합니다. 예를 들어 사용자가 A를 찾고 싶다.라는 목표가 있다면 아래와 같이 세세하게 분리해 이해할 수 있습니다.
검색 초기화면 모듈
글자를 입력하는 곳을 찾는다. = 텍스트 인풋 컴포넌트
A의 이름을 표현하는 글자를 하나씩 누른다. = 키보드 컴포넌트
원하는 이름을 다 입력했다고 알린다. = 완료 버튼 컴포넌트
시스템 – 패턴
여러 신체 기관을 이용해 기능을 수행하는 것을 시스템이라 합니다. 프로덕트에서는 모듈과 컴포넌트를 이용해 문제를 해결하는 과정으로 패턴이라 합니다. 여러 요소를 이용해 사용자가 상호작용하고 원하는 작업을 끝마치는 과정 전체를 뜻합니다. 예를 들어 검색어를 치고 검색 결과를 보고 원하는 정보를 훑어보는 전체 과정이라고 볼 수 있습니다.
셀 디자인 시스템
이것이 제가 생각하는 셀 디자인 시스템입니다. 마치 창조자가 되어 생명을 만들고 진화시키는 것과 같죠. 평범한 생명체와 다른 점이라면 100억 년이 걸릴 진화를 순식간에 끝난다는 점이겠네요. 이 생명체는 외부 환경에 예민하게 반응하며 더 잘하기 위해서 끊임없이 변합니다. 상황에 따라 필요한 것이 있으면 새로운 기능으로 문제를 해결해기도 합니다. 게다가 말을 할 줄 알아서 사용자와 이야기할 수도 있습니다! 마치 어드벤처 타임에 나오는 잭처럼요.
저는 우리가 만드는 디지털 프로덕트가 단순한 기계 부품의 조합이 아닌 사용자의 마음에 공감하고 목표를 달성할 수 있게 돕는 말하는 생명체라 생각합니다. 마치 생명을 만들듯 섬세하게 디자인해 우리의 문제를 더 잘 해결해주는 잭 같은 프로덕트가 많아지길 기대합니다.
알림은 애플리케이션에서 발생한 일에 대해 알려주는 것입니다. 시스템 변경사항이나 다양한 커뮤니케이션에 대한 내용을 주로 알려줍니다. 시스템 변경사항은 예약 상태 변경이나 팔로우한 콘텐츠 업데이트 등이 있고, 커뮤니케이션은 사용자 간의 소통으로 메시지, 전화 등이 있습니다.
사용자가 서비스를 사용하고 있지 않을 때 알림을 받는 경우가 많기 때문에 맥락에 맞는 메시지를 적절한 시간에 전해야 합니다. 사용자가 서비스로부터 기다리는 일반 메시지는 기본 수준의 강도로 알림을 전합니다. 만약 메시지를 놓치거나 의사결정이 늦었을 때 사용자에게 큰 리스크가 있을 때는 평소와 다르게 강한 강도로 알림을 전하기도 합니다.
양치기 소년이 되지 않도록 조심해야 합니다. 또한 모든 알림은 사용자의 동의를 받아야 하며 인지 공해에 대한 관심이 커지면서 사용자가 다양한 설정으로 알림을 무시할 수 있기 때문에 각 상황에 맞게 의미 있는 고객 경험이 되도록 섬세하게 설계해야 합니다.
좋은 알림을 위한 질문
사용자가 신뢰하고 알림에 집중할 수 있어야 합니다. 사용자가 알림을 확인할 가치가 없다고 생각하는 순간 앱에서 보내는 모든 메시지를 무시할 것입니다. 제작자가 보여주고 싶은 것이 아니라 사용자에게 필요한 것을 보여주는 것이 중요합니다. 알림을 보내기 전 아래 필수 질문과 주의 사항을 확인합니다.
필수 질문
알림을 왜 보내는가?
어떤 내용을 알려야 하는가?
어떻게 보여줄 것인가?
사용자는 언제 반응해야 하는가?
알림이 지속적인가 지속적이지 않은가?
주의 사항
사용자가 동의한 내용만 보낼 것
사용자에게 가치 있는 정보를 줄 것
제목과 내용을 짧고 읽기 쉽게 쓸 것
시급도에 따라 강도를 조절할 것
반복하지 말 것
삭제와 같은 파괴적인 행동을 요구하지 말 것
민감한 개인 정보를 포함하지 말 것
광고를 위해 사용하지 말 것
알림 모델
앱 내에서 알림은 통합 알림을 주로 사용하며 알림의 종류가 많아지면 주로 통합 알림과 개별 알림이 섞인 하이브리드 형태를 많이 사용합니다. 알림은 소스, 정보, 메뉴, 배지로 구성됩니다.
소스: 알림을 보낸 출처입니다.
정보: 사용자에게 전하는 메시지입니다.
탭: 정보의 출처가 시각적으로 표현된 탭입니다.
배지: 새로운 정보가 있음을 알려주는 시각 장치입니다.
하단 탭 내비게이션에 정보 출처 탭이 있을 경우 해당 탭에 배지가 붙습니다. 사용자가 화면에서 소스에 바로 접근할 수 있는 방법이 없는 알림은 중앙 알림에서 모아서 보여줍니다.
플랫폼별 알림 형태
안드로이드 Android
알림 창
안드로이드 알림은 노티피케이션 창은 헤더, 콘텐츠, 행동으로 구성됩니다. 헤더에는 앱에 대한 정보와 타임 스탬프가 표시됩니다. 헤더 텍스트는 정보의 출처 Source를 알려줄 때 표기합니다. 콘텐츠 영역은 제목, 텍스트, 이미지를 표시합니다. 이미지에는 사용자와의 대화일 경우 아바타를 표기합니다. 액션 영역은 주로 2개 행동이 색이 있는 텍스트로 표시됩니다.
헤더 (Header): 앱 아이콘, 앱 이름, 헤더 텍스트(옵션), 타임스탬프, 확장 가능한 노티 표시
콘텐츠 (Content): 콘텐츠 제목, 콘텐츠 텍스트, 큰 아이콘(옵션)
액션 (Action): 텍스트 버튼
UI 경험
사용자는 상단을 쓸어내려 볼 수 있는 알림 서랍 (Notification Drawer)에서 다양한 알림을 모아서 확인할 수 있습니다. 하단 알림 설정을 통해 전체 알림을 설정할 수 있고 개별 애플리케이션의 알림을 설정할 수도 있습니다. 확장 가능한 알림일 경우 더 많은 텍스트와 이미지를 확인할 수 있습니다. 같은 출처 (Source)의 알림이 겹칠 경우 하나로 합쳐서 “3개 메시지가 있습니다”처럼 표시하며 확장했을 때 자세한 요약을 표시합니다.
알림 서랍 (Notification drawer)
확장 뷰 (Expanded view)
알림 여러 개 겹칠 때 (Multiple notification)
알림 그룹(Parent, Child)
인지 강도
안드로이드에서 디지털 디바이스에서 여러 방법으로 신호를 보냅니다. 강도에 따라 크게 5가지로 구분합니다.
LED 깜빡이기
상단 스테이터스 바에 아이콘
소리와 진동
잠금 화면
현재 화면에 보여주기
중요도 레벨
중요도에 따라 사용자의 주의를 끄는 4가지 단계가 있습니다.
High: 시각 요소+소리. 메시지, 알람, 전화 같은 High
Default: 소리. 할 일 알림 같은 알림. 소리
Low: 소리 없음. 새 콘텐츠 등
Min: 소리, 시각 요소 없음. 프로모션 콘텐츠
iOS
알림 창
iOS 알림 창은 앱 아이콘, 미디어, 제목, 메시지, 앱 이름, 액션 버튼으로 구성됩니다. 앱 아이콘에서는 메시지일 경우에는 앱 아이콘과 출처(Source)를 함께 표시합니다. 사용자가 알림을 길게 눌러 창을 확장해 몇 가지 행동을 할 수 있게 설정할 수 있습니다.
앱 아이콘
앱 이름 or 출처
제목
메시지
타임스탬프
액션
UI 경험
잠금 화면에서 개별 알림을 관리할 수 있습니다. 설정에 따라 상세 내용을 가릴 수 있고 잠금을 해제하면 자세한 내용을 확인할 수 있습니다. 상단을 쓸어내려 볼 수 있는 알림 센터(Notification Center)에서 잠금화면과 동일한 작업을 할 수 있습니다. 앱을 사용하는 동안 알림이 올 경우에는 상단에 배너(Banner)가 뜹니다. 알림을 길게 눌러서 알림 창을 확장할 수 있고 바로 액션을 선택할 수도 있습니다. 가려졌을 때 보이는 문구도 설정할 수 있습니다.
잠금화면 Lock Screen
알림 센터 Notification Center
팝업 Banner
길게 눌러 확장하기
확장 보기에서 바로 행동하기
가려졌을 때 플레이스 홀더
그룹핑
인지 강도
크게 4가지 단계가 있으며 단계별로 강도에 따라 소리와 진동, 스크린 켜짐, 포커스 시스템 설정 무시가 다릅니다.
Passive: 소리와 진동이 없고, 스크린이 켜지지 않고, 시스템 설정을 무시하지도 않습니다.
Active(Default): 소리와 진동이 있고 화면도 켜집니다. 집중 모드를 무시하지 않습니다. 가장 일반적인 알림입니다.
Time Sensitive: 소리와 진동이 있고 화면도 켜집니다. 집중 모드를 무시합니다. 집중 모드가 도입되면서 생겼습니다.
Critical: 소리와 진동이 있고 화면도 켜지고 집중 모드를 무시합니다. 행동하기 전까지 지속적으로 소리와 진동이 울립니다. 긴급 재난 경보 종류에 쓰입니다.
UX(User Experience)는 사용자가 서비스, 제품을 사용하면서 느끼고 생각하는 모든 경험을 뜻합니다. UX 디자인은 사용자에게 의미 있는 경험을 전달하는 제품을 만드는데 필요한 프로세스를 설계하고 실행하는 것이죠. 사람이 목표를 달성하기 위해 도구를 사용하는데, 회사는 다양한 방식으로 더 나은 도구를 제공합니다. 그 형태는 무형의 애플리케이션이 될 수도 있고 유형의 자동차가 될 수도 있죠. 여러 도구 중 스마트폰 애플리케이션은 여전히 사람들의 삶에 큰 영향력을 끼치며 중요하게 다뤄지는 UX 중 하나입니다.
눈으로 세상을 보는 것은 생활 속에서 약 80%의 정보를 수집하는 중요한 방식입니다. 세상을 인지하는 방법 중 가장 빠르게 많은 정보를 수집할 수 있는 수단이죠. 시각으로 정보를 수집하는 것은 여러 경험의 트리거 역할을 하기 때문에 디자이너가 필수적으로 알아야하는 지식 중 하나입니다. 대부분의 디자이너는 이 원리를 이해하고 시각적인 결과물을 만들거나, 다른 오감을 결합해 전체 경험을 설계합니다. 시각 인지의 원리를 이해하면 알쏭달쏭한 디자인이 어떤 원리로 동작하는지 이해하는데 도움이 됩니다.
