UI를 위한 패턴
패턴은 사용자가 디바이스를 조작해 행동하는 일반적인 과정을 뜻합니다. 컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다. 사용자에게 익숙한 일반적인 패턴을 많이 사용하며, 맥락에 맞추어 변형하기도 합니다.
속성 Property
패턴은 크게 3가지 속성을 갖습니다.
맥락: 사용자가 처한 상황과 원하는 바
흐름: 사용자가 어떤 과정을 거치는가
구현: 사용자가 어떻게 인지하고 사용하는가
맥락 Context
맥락은 사용자가 처한 상황을 뜻합니다. 한 문장으로 육하원칙에 따라 정리합니다. UI는 주로 웹, 모바일과 같이 제한된 디바이스로 접하기 때문에 아래 예시와 같은 문장으로 작성되는 경우가 많습니다. 변형하기에 따라 문장의 순서를 달라질 수 있지만, 육하원칙의 각 요소를 반드시 작성합니다. 앞으로 만들 모든 요소의 판단 기준이 되기 때문에 매우 중요한 문장입니다.
흐름 Flow
작성한 맥락을 바탕으로 흐름을 설계합니다. 예를 들어 레시피를 찾는다라는 목표를 달성하기 위한 흐름을 설계한다면, 크게 입력, 결과, 선택의 단계를 설계할 것입니다. 추상적인 단어로 큼지막하게 정의한 단계를 다시 세부적으로 정의하면 키워드 입력> 검색 결과 > 레시피 선택으로 흐름을 더 구체적으로 정의합니다.
형태 Shape
더 이상 넣거나 뺄 것 없이 흐름을 설계했다면, 이제 사용자가 구체적으로 사용할 화면을 설계합니다. 각 단계별로 달성해야 하는 목적을 뚜렷하게 구분하고, 목적을 달성하기 위해 필요한 것들을 대응하는 시각 요소로 화면을 설계합니다.
아래 예시를 살펴보면, 입력 단계의 목적은 사용자가 원하는 레시피를 키워드로 입력하는 것입니다. 이 목적을 달성하기 위해서는 키워드를 입력하는 영역, 키워드를 확인하는 영역, 사용자가 찾을 확률이 높은 키워드를 자동으로 완성해주는 영역을 설계합니다. 입력 단계의 목적을 달성하기 위해서 반드시 필요한 요소만을 추가합니다.
케이스 Case
구체적인 형태 설계를 마친 뒤에는 이제 경우의 수를 고려합니다. 처음 형태를 설계할 때는 가장 이상적인 상태로 디자인합니다. 하지만 사용자와 데이터가 서로 상호작용하는 프로덕트에는 다양한 상태가 존재합니다. 화면을 구성하는 요소 중 변수가 무엇인지 명확하게 정의하고, 변수가 변했을 때의 화면을 설계합니다.
로직 Logic
프로덕트를 디자인하다 보면 흐름, 형태, 케이스를 조합 해 더 복합적인 설계가 필요할 때가 있습니다. 각 페이지의 케이스는 변수가 단독으로 적용이 되었다면, 로직은 더 큰 단계로 변수들이 서로 영향을 주고받을 경우를 설계하는 것입니다. 특정 단계에서 출력된 결과에 따라 다른 요소들이 어떤 영향을 주고받는지 전체적인 알고리즘 케이스를 설계합니다.
자주 쓰이는 패턴
이미 검증된 훌륭한 UI 패턴이 많습니다. 사용자가 새로 학습할 필요가 없게 보편적으로 사용하는 UI 패턴을 사용하는 게 유리합니다. 만약 더 복합적인 목적을 달성하기 위해 변형이 필요할 경우 UI 패턴이 어떻게 구성되었으며 어떤 목적으로 만들었는지를 고려하면서 개조해 사용합니다.
아래 웹사이트에서 다양한 패턴을 확인할 수 있습니다.
https://designcompass.org/2020/10/05/패턴-2/
