오늘은 피그마의 레이아웃 툴인 Autolayout과 Constraint를 활용해 반응형 UI 디자인 방법을 설명할 예정이다. 두 기능이 의미 있는 이유는 이를 통해 개발자의 코드와 유사한 원리로 화면을 기획할 수 있기 때문이다. 디자인이 실제로 잘 구현되기 위해서는 디자이너가 어떤 체계와 의도로 화면을 구성했는지 개발자에게 명확하게 전달할 수 있어야 한다. 레이아웃의 크기나 콘텐츠의 변화에 따른 모든 케이스를 화면으로 전부 그리거나 글로 설명하지 않아도 Autolayout과 Constraint 기능으로도 충분히 할 수 있다.

이번 ‘랜덤 UX 인사이트’는 전부 생활하면서 우연히 발견한 UX 장치들로 꾸렸다. 대놓고 표출되는 기능이 아니라 사용자의 맥락에 따라 은근히 침투하는 케이스들이다. 세심하고 매력있는 UX로 브랜드의 호감도가 급상승한 경우도 있었고 거슬린 경우도 있었는데, 그 경험을 소개해보겠다.

이번 편에서는 그다음 단계인 ‘컴포넌트(Component)’를 만드는 방법을 소개할 예정이다. 컴포넌트는 단어의 의미 그대로 화면의 구성 요소를 가리키며, 여러 컴포넌트를 조합해 하나의 UI를 이룬다. 이때 버튼(Button), 스위치(Switch 혹은 Toggle), 카드(Card), 텍스트필드(Text field)처럼 반복적으로 쓰이는 주요 컴포넌트를 미리 디자인 에셋으로 저장해두면 UI 제작 시 많은 시간을 단축할 수 있다.

스타트업으로 이직 후 디자인 시스템을 0에서부터 구축하는 과정에서 새로 배운 것이 많아 비슷한 고민을 하는 사람들을 위해 공유하고자 한다. 디자인 시스템이란 서비스의 일관성과 작업의 효율을 위한 UI 컴포넌트 가이드를 뜻하며 색상, 글꼴, 그리드, 간격 등이 해당한다. 밥알이 모여 주먹밥이 되고 원자가 모여 분자가 되듯 디자인 시스템의 토대를 만들기 위해서는 디자인 컴포넌트를 먼저 다지는(?) 작업이 선행되어야 한다. 총 3편으로 작성할 예정이며, 디자인 토큰(Design token)을 활용해 디자인 시스템의 토대를 만드는 방법을 먼저 설명하겠다.

광고에 카피라이터가 있다면 사용자경험(User Experience, UX)에는 UX 라이터(UX Writer)가 있다. 책이나 기사처럼 줄글로 길게 설명하는 것이 아니라 한정된 크기의 화면에 간결한 문장으로 사용자에게 말을 걸고 붙잡아야 한다는 점에서 광고 카피와 비슷하다. 한 사람이 말하는 듯 일관된 어휘와 문체를 이용한 UX 라이팅은 서비스의 브랜드 이미지를 강화하는 역할을 한다. 요즘 IT 기업에서 개발자, 프로덕트 디자이너, PM만큼이나 UX 라이터에 대한 수요가 높아지는 것을 보면 갈수록 UX 라이팅(UX Writing)의 중요성이 커지고 있음을 알 수 있다. 오늘은 UX Writing의 역할과 어떻게 서비스에 적용하면 좋은지 등을 이야기해보려 한다.

집에서 PC로 보던 유튜브 영상을 외출하며 모바일에서 이어보거나 PC에서 공인인증이 필요할 때 카카오/네이버 모바일로 간편인증을 하는 일은 너무도 자연스럽게 이루어진다. 그만큼 우리는 하나의 서비스를 사용하더라도 모바일, PC, 태블릿, TV 등의 디바이스 중 상황과 맥락에 맞는 걸 선택할 수 있는 환경에 살아가고 있다. 오늘은 여러 개의 디바이스를 교차 활용할 때의 사용자 경험(이하 Multi-Device User Experience)에 관해 이야기해 보겠다.