UI 요소(component) 1
UI 요소에 대한 개요
간만에 밤을 세우다시피 했다. 오늘 점심에 외국 기업에서 손님들이 방문하기 때문이다. 아무리 중요한 보고 자리라도 원래는 준비안하고 즉흥적으로 프리젠테이션하는 성격인데, 이번에는 영어로 해야 해서 나도 긴장하고 있다. 구글 번역을 돌려가면서 내 후진 발음을 교정하는 데에만 3~4시간을 보낸 것 같다. 요즘 알만한 글로벌 브랜드에서 연락이 오고 있다. 오늘은 B이고, 다음주는 C브랜드다. D로 시작하는 브랜드는 뭐가 있을까?
UI는 기본 요소부터 최종 User Flow에 이르기까지 하나 하나의 조각이 모여 전체적인 구성을 이룬다. 각 단계마다 고려요소가 다르지만 좋은 UI는 기본 요소부터 시작한다는 점을 알아둘 필요가 있다.
UI 기본 요소는 UI 설계의 가장 기본 단위이다
source : Hai ThangUI 기본 요소는 특정 정보나 기능을 화면 상에 나타내는 최소 단위이며, 일반적인 명칭/형태에 해당 서비스의 특징과 용도에 따른 변형이 설계시 이뤄진다. 다시 말해 원래의 기능적 목적이나 명칭을 서비스의 특징에 맞게 변형하는 작업이 필요하다.
source : Rohan KamathUI 요소들의 기원을 찾는 일은 재미있다. 토스트팝업은 토스트가 튀어나오는 형상에서, 슬라이더는 초창기 라디오의 방송선국 기능에서, 브레드크럼은 헨젤과그레텔의 빵조각에서, 스위치는 기계 조작시에 켜고/끄는 기능에서 유래했다.
source : Megan N최근 미국에서는 Atomic Design이라는 게 약간의 유행을 끌고 있는데, UI 기본요소들에서 시작하여 복합요소(Complex component, 이들은 Organisms라고 부른다), 템플릿, 페이지로 이어지는 확장성 높은 UI 설계 체계를 가져가자는 부류이다. 복잡하고 장황하게 얘기하지만 위 내용이 거의 전부이고 특별한 건 없다.
source : Rohan KamathAtomic Design이든, 원래부터 UI를 요소 단위로 고민해왔떤 사람들이든 간에 특정 정보나 기능을 그대로 쓰지 않고 UX를 고려하여 변형하는 것은 바람직한 일이다. 화면 상에 나타내는 최소 단위인 UI 요소는 의외로 그 자체로 UX 품질을 좌우할 때가 많다. 이 쪼끄만 것이 말이다.
source : Rohan Kamath가령 일반적인 명칭/형태에다가 그 쓰임새에 걸맞는 '어떤 특색이 더해지는가'에 따라서 해당 UI 요소의 UX 품질이 달라질 수 있다. 아래 예시는 일반적인 명칭(Continue)보다는 해당 시점의 구체적인 경험(Pay $32.00)을 반영해야 한다는 것을 말해주고 있다.
source : SophieUI 요소가 모인다고 자연스럽게 UI가 떡하니 나오는 것은 아니다. 동일한 UI 요소를 사용했다고 하더라도 그 배치와 형태에 따라서 UX가 달라질 수 있다. UI 설계는 여기에 매력이 있다.
source : NALSengineering또한 동일한 UI 요소라고 할지라도 맥락에 따라 사용자 행위에 따라서 다양한 변화가 수반될 수 있다. 예를 들어 입력 요소(Form)는 가로로 긴 직사각형 형태를 기준으로 여러가지 변형이 있을 수 있으며, 입력 상태에 따라서 색깔이나 상태 정보 표시가 변화될 수 있다. 사용자들은 이런 작은 단위에서부터 UX를 체감한다
source : Fabio MelhadoUI 요소를 배우는 것은 UI 설계의 기초에 해당한다. 가급적 매일 글을 올리려고 노력하다보니, 한편으로 오늘 미팅을 도와줄 동료가 출근하길 기다리며 글을 올린다. 눈물이 자꾸 나네... 새벽녘에 나도 모르게 잠깐 눈을 붙이긴 했다.
