brunch

매거진 성장하는 이들의 이야기 그로스토리

라이킷 116 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 마켙커리어 Jun 01. 2021

결국 좋은 UI/UX란 비즈니스의 목적을 달성하는 것

#그로스토리12 디자이너 서연주

성장한 이들의 경험담, '그로스토리' 시리즈입니다. 시행착오를 먼저 겪고 성과를 낸 이들의 인터뷰를 통해 실무 꿀팁을 얻어보세요!
➔ 그로스쿨 웹사이트 구경하기

인터뷰이 프로필

이름: 서연주

소속: 인하우스 UI 디자이너 from.designer 커뮤니티 운영

직업: UI/UX 디자이너

1. UI와 UX는 결국 비즈니스 목표 달성을 위해 생겨난 개념이다

김나영(그로스쿨 대표, 이하 김): 누구세요?

서연주(UI 디자이너): 인하우스에서 모바일과 웹, UI 디자인을 담당합니다. 사용성과 가장 밀접한 페이지의 UI를 다뤄요.

김: UI의 개념을 뭐라고 설명해주면 좋을까요?

서연주: UI(사용자 인터페이스)는 사용자가 디지털 제품 또는 서비스를 사용하기 위해 상호 작용할 수 있는 모든 것이에요. 컴퓨터, 모바일, 웹사이트, 키보드를 사용하기 위해 사용자가 접점을 이루는 모든 면이죠.

UX와 UI, 두 요소는 서로 긴밀하게 협력하고, 함께 작동하는데 UX는 경험한 모든 측면을 포함해요. 사용자가 제품이나 서비스를 사용할 때 느낌, 태도, 행동 등이죠. 좋은 사용자 경험과 나쁜 사용자 경험은 UI 요소와 상호 적용하는 게 얼마나 쉬운지 어려운지에 따라 결정돼요.

김: 음…

서연주: 만약 나영 님이 식당을 갔을 때 조명과 음악이 너무 좋은 거에요. 서비스도 친절하고 음식도 정말 맛있었어요. 이 모든 경험이 UX에 해당하고, 음식을 먹기 위해 필요한 테이블, 의자, 접시, 유리나 식기 등을 UI라고 비유할 수 있어요.

좀 더 이해하기 쉽게 하나의 서비스로 예를 들어볼까요? 코로나 2.5단계로 평일과 주말 집에 있는 시간이 많아지면서 배달 음식을 자주 시켜요. 우리가 모바일이나 웹에서 배달 서비스를 이용할 때 원하는 음식을 검색하고, 장바구니에 담아 결제 단계까지 완료해야 원하는 가게에 주문이 접수돼요. 이 과정에서 필요한 음식점 정보, 장바구니와 결제 버튼 등 서비스를 이용하기 위해 사용자가 접하는 영역을 UI라고 할 수 있어요. 그리고, 웹이나 모바일의 이런 서비스를 사용하면서 느낀 감정을 포함해서 실제 음식이 집 앞으로 배달되기까지 시간, 요청사항, 음식 맛의 만족도 등 모든 경험이 UX, 사용자 경험이에요.

김: 그럼 UI는 오히려 보이는 게 정말 중요하겠네요?

서연주: 네, 맞아요. UX가 경험 전반의 느낌에 관한 것이라면, UI는 제품의 인터페이스 모양과 기능에 관한 것이에요. UI는 제품의 인터페이스를 통해 사용자를 시각적으로 안내하기 때문에 UI 디자인은 시각적 상호 작용을 고려하여 버튼, 아이콘, 간격, 색상, 타이포그래피 같은 디자인 요소에 중점을 둬요. 버튼 색상과 위치가 사람들이 클릭을 잘 할 수 있도록 유도하는지, 혹은 명확하지 않아 머뭇거리게 만드는지 UI 디자이너들은 많이 고민해요.

UX와 UI의 차이점. 흔히 좌뇌, 우뇌로 비교하기도…

김: UI라는 개념이 부각된 이유는 뭘까요? 스마트폰의 발전?

서연주: 스마트폰과 같이 화면의 크기나 키보드 등의 제한적 요소를 가진 디지털 가전들이 출현하면서예요. 제한된 작은 화면을 사용자가 효과적으로 사용하기 위해서는 쉽고 직관적인 UI에 많은 고민을 하게 됐죠. 컴퓨터 기반의 서비스들이 모바일의 웹이나 앱으로 전환하면서 매출을 늘리고 성장하기 위한 비즈니스 목표 달성을 위해 UI와 UX 역할이 더욱 필요해졌어요.

우리에게 친숙한 UI가 언제부터 사용되었는지 궁금하지 않으세요? 저는 이 부분이 궁금해서 UI 역사를 살펴봤어요. 현재 우리가 당연히 사용하는 아이콘이나 메뉴를 그래픽 사용자 인터페이스 GUI(graphical user interface)라고 해요. 마우스 개발 이후로 발전했어요. 마우스 개발 이전에는 키보드로 명령어를 입력해서 컴퓨터 작업을 수행하는 방식이었어요. 최근 UI는 사물인터넷, AI 기술이 발전하면서 제스처나 음성 기반의 다양한 방식으로 표현돼요. 끊임없이 진화해요. 이런 변화와 함께하는 지금 이 시각이 흥미진진해요.

김: UI는 생각보다 유구한 역사가… 그러면 연주 님이 이렇게 UI 관련 일을 하시지만, 원래 이쪽 일을 한 건 아니군요?

서연주: 처음에 웹 에이전시에서 운영 디자인을 했어요. 웹에서 이벤트 페이지와 배너를 만들고, 개선작업도 진행했어요.

김: 개선작업이라 하면…

서연주: 기존에 있는 사이트에서 새로운 메뉴가 필요해진 상황이나 사용이 불편한 부분이 발생한 경우 더 나은 방향으로 개선하는 작업이 필요해요. 그런데 사이트 전체를 바꾸기엔 시간과 비용이 많이 드니 필요한 곳부터 부분적으로 변경하는 거죠. 메인 페이지의 이미지 노출 방식만 바꿔보자, 요런 것? 개선과정은 먼저 기존 유저가 어떻게 사용하는지 살펴보는 게 필요해요. 메뉴를 찾는데 막힘이 없는지, 중요한 문구가 시각적으로 잘 보이는지. 테스트하는 프로세스부터 시작할 수도 있고 사용자 인터뷰나 리서치를 통해 개선이 필요한 부분을 파악하기도 해요.

김: 아까 스마트폰이 UI/UX 개념이 더 부각된다고 했는데 왜 그럴까요?

서연주: 스마트폰 등장으로 지난 10년간 우리의 일상은 크게 변했죠. 사람들에게 새로운 경험이었고, 스마트폰은 작동 방식 학습이 필요했거든요. 컴퓨터에서 웹을 사용할 때 어떤 메뉴나 아이콘을 클릭하면 어떤 내용이 나오겠구나! 대충 알 수 있을 정도로 익숙해요. 하지만 모바일은? 화면이 작아서 어떤 부분을 터치해야 원하는 내용을 찾을 수 있는지, 사람들이 이런 과정을 어떻게 느끼고 생각하는지 사용성 연구를 더 깊게 한 거죠.

김: 맞네요. 삼선을 누르면 메뉴가 나온다. 이것도 사실 학습한 거지 예전에 모바일, 스마트폰 처음 쓸 때는 다 제각각인 아이콘에, 위치에, 대혼란이었어요.

2. UI/UX, 왜 최근에야 이렇게 부각될까?

김: UI랑 UX는 요즘에서야 우리나라에서도 중요하게 여기는 거 같은데 연주 님은 3년 전부터 이미 UI를 스터디하셨어요. 미리 중요성을 안 건가요?

서연주: 해외 아티클에 많은 정보가 있다는 사실은 오래전부터 알았어요. 그런데 아티클을 공부하려니 영어부터 공부해야 할 것 같더라고요. 몇 개 보다가 해석에 시간이 오래 걸려 포기했거든요. 그런데 3년 전부터 번역기에 AI 기능이 붙더니, 요즘은 문맥 번역이 정말 좋아졌어요. 크롬 자동 번역기를 이용하면 웹/모바일 브라우저에서 바로 번역해서 볼 수도 있어요. 그때부터 페이스북 그룹에 제가 좋았던 아티클을 스크랩했어요. 원래는 개인 자료실 같은 개념으로 만들었는데, 가입자들이 늘어나면서 지금은 거의 7,400명 정도 돼요.

김: UI LAB을 운영하면서 그런 일도 있나요? 이 기사 내가 전에 봤는데 이제 국내에 도입된다든가…?

서연주: 아, 네! 아티클에 디자인 시스템이라는 용어가 엄청 많이 나오길래 이게 디자인 가이드랑 뭐가 다른 거지? 하는 의문이 들어서 스터디 주제로 정해서 파고들었어요. 기존의 일반적인 디자인 가이드는 일관성을 고려한 그래픽 요소들을 정의해요.

버튼이나 폰트 사이즈, 컬러, 혹은 브랜드 컬러의 사용 원칙이지만, 디자인 시스템은 좀 더 확장된 개념으로 누구나 이 시스템을 가져다 사용할 수 있도록 모듈화하는 개념이 추가됐어요. 공부한 뒤 거의 6개월에서 1년 뒤 토스(TOSS)나 일부 스타트업에서 디자인 시스템 사례를 발표하기 시작했어요. 이런 걸 보면 우리나라가 해외보다 6개월에서 1년 정도가 시차가 있다고 느껴져요.

디자인 시스템이란… / 출처: WisOpt Design System

김: 2–3년간 아티클을 공부하면서 스스로 변한 점도 있나요?

서연주: 회사에서 같이 일하는 기획자나 PO나 동료 디자이너, 그리고 결정권을 가진 이해관계자분들을 설득할 때 도움이 많이 되었어요. 이 버튼이 여기에 있으면 어떤 문제가 있는지, 폰트 크기, 색상은 왜 이렇게 사용해야 하는지, 문제점과 이유를 술술 설명하는 나를 볼 때? (웃음)

이걸 내가 어떻게 알지? 했는데 해외 아티클을 공부했던 내용이 체화되어 나오더라고요. 저는 기본이 제일 중요하다고 생각하는데 작년에 UX101 북스터디와 해외 인기 아티클 스터디를 진행하면서 기본기를 다지는데 정말 많이 도움 돼요. 그동안 공부하며 여기저기 흩어진 정보들이 하나의 맥락으로 이어지는 짜릿함을 느꼈어요. 이게 정말 중독성이 있어요. 끊임없이 스터디를 하는 원동력이 되어주는 것 같아요.

김: 아티클로 공부하고 트렌드를 파악하시는데 어떤 방식으로 하세요?

서연주: 스터디 발표를 준비할 때 일단 관심 있는 주제의 키워드를 구글에 검색해서 처음부터 나오는 아티클을 다 열어봐요. 열 개 이상 열어보면 그 중 내용이 풍성하고 구성이 좋은 아티클이 있거든요. 그다음에 좋은 아티클만 모아요 그리고 중복되는 내용 중 가장 설명이 잘 되어있는 부분을 스터디 발표자료 만들 때 내용으로 첨부를 해놓기도 해요. 아티클을 매일 보면 자주 나오는 내용이 현재 중요한 사항인 경우가 많더라고요. 앞에서 말씀드린 디자인 시스템 사례처럼 트렌드를 파악하는 데 도움 됐어요. UI LAB 공부를 운영하면서 목표가 두 가지 있었어요. 하나는 통찰력을 갖자. 그리고 발표력을 기르자.

김: 최근에는 어떤 키워드로 분석하셨어요?

서연주: 휴리스틱이에요! 이 용어가 철학책을 읽었을 때 접했는데, UX/UI 분야와 다른 곳에서도 사용되니까 도대체 어떤 연관이 있는지 궁금해졌거든요. 휴리스틱은 경험에 기반한 문제 해결이나 발견해내는 방법이라고 해요. 사람의 직관적 판단이고, 반대 의미는 알고리즘이에요. 경제학에서는 “보이지 않는 손”과 같은 경제 원리를 설명하는 용어였어요.

모든 디자이너가 알아야 할 10가지 사용 적합성. / 출처: uxdesign.cc

김: 말씀 들으니 UI, UX는 결국 사람의 행동에서 연구를 시작하기도 하고 인문학, 심리학과도 연관된 부분이 많은 거 같아요. 우리가 그런 부분을 많이 놓치고 비주얼이나 문구처럼 보이는 부분만 신경 쓰는 게 아닌가 하는 생각이 드네요.

3. 최근의 UI/UX 트렌드 중 눈여겨볼 만한 것?

김: 아까 우리나라로 오는 데 6개월에서 1년 정도 시차가 있다고 했는데, 현재 해외 아티클에서 자주 나오는 주제는 뭐가 있을까요?

서연주: 최근 많이 보인 주제 중 하나는 CTA(Call To Action)예요. 마케팅에서 많이 사용되는 용어면서 전환율에 직접적인 영향을 주는 요소에요. 단순히 버튼으로 보는 게 아니라 이 페이지에서 조화로운 CTA 위치는 어디가 좋은지, 클릭률이나 전환율이 높은지, 사람들이 어떻게 느끼는지 많은 연구사례가 나왔어요. 그리고 또 하나는 접근성이에요. 매년 끊임없이 나오는데, AR. VR과 같은 새로운 기술이 개발되면서 더욱 중요해지는 추세예요.

아! 한 가지 더 말씀드리면 마이크로 카피가 있네요. 사용자 인터페이스에서 사용자가 취하는 행동에 직접 관련된 단어나 문구를 뜻하는데, 사용자가 원하는 행동을 할 수 있도록 도움을 주는 가이드 역할을 해요. 사용자 경험에 영향을 미치기 때문에 긍정적 경험을 제공하는 관점에서 사람들의 관심이 높아졌어요.

김: 맞아요. 방해처럼 보이지 않으려면 그런 심리와 연결된 구성도 중요하거든요.

서연주: 또 쿠폰도요. 쿠폰을 어떻게 사용해야 하는지 쿠폰의 위치는 어디에 있는 게 좋은지, 쿠폰으로 하여금 내가 의도한 사람들의 행동을 어떻게 끌어낼 것인지에 관한 부분들. UX에는 사용자 경험의 총합의 부분이라면 UI는 브랜딩 측면과 시각적 표현을 어떻게 해야 하는지 그런 부분이 더 중요해요. 그래서 생각해보면 UX 디자이너는 기획 베이스에서 사용자 경험을 디자인하고 UI 디자이너는 그래픽 베이스에서 디자인하는 차이도 있는 것 같아요.

UI는 시각적 표현이 중요하고, 제한된 화면 영역에 텍스트를 많이 쓸 수도 없으니 이런 상황에서 디자인으로 어떻게 표현해야 효과적일까? CTA는 이렇게 해야 할까? 배너 A와 B 비교하면 어떤 반응일까? 계속 고민하는데 저는 이런 UI 부분이 마케팅 분야와도 연관되어 있어 너무 매력적이에요.

김: 보시기에 UI나 UX가 괜찮다 하는 앱이나 서비스가 있을까요?

서연주: 누구나 다 알지만 그만큼 잘하는 토스, 마켓컬리, 현대카드 그리고 최근 가장 감동한 펫프렌즈! 캐롯 손해보험도 젊은 감각으로 잘 구성했어요. 왜 이 서비스들이 UI가 UX가 좋다고 느낄까요? 단순히 UI나 UX가 편하고 사용성이 좋아서라기보단, 브랜드를 향한 믿음이 같이 어우러졌을 때 사용성과 경험이 좋은 인상으로 기억에 남는 것 같아요.

김: 브랜딩과 같이 어우러져 경험을 준다…?

서연주: 브랜딩 개념에 맞는 디자인은 색상 팔레트, 모양, 폰트, 일러스트레이션 아이콘 등 UI 디자인과 연관되어 있어요.

금융계에서 젊은 감각으로 다가가는 캐롯 손해보험.

UX 마이크로 카피의 사례로 자주 쓰이는 펫프렌즈.

김: 스타트업처럼 작은 조직에서 실무자들이 모든 걸 다 해야 하는 상황에서는 브랜딩에 크게 신경을 못 쓸 거 같아요. 혹시 브랜딩과 UI를 동시에 잘하기 위해서는 뭐가 필요할까요?

서연주: 일단 브랜딩은 잘 되어 있는 서비스를 벤치마킹하고 분석해 보면 도움이 돼요. 그런데 거기서 끝나지 말아야 해요. 브랜딩이 어떻게 표현이 되었는가를 분석하기 위해서는 기본 원칙이나 다양한 UX 관련 지식도 필요해요. 그래야 문제점을 파악하고, 어떻게 개선해야 하는지 더 나은 방법을 찾을 수 있거든요.

김: 기본이라 하면?

서연주: UI 디자인 요소는 색상, 아이콘, 타이포그래피, 레이아웃 등이 있지요. 사람의 심리와 시스템에 관한 부분도 함께 이해하면 이 영역에서 색상, 사이즈가 어떤 고민을 통해 결과물이 나왔는지 파악하는 데 도움이 돼요.

예를 들면 면적 대비는 같은 색상인데 면적이 넓어지면 더 진해져 보이는 현상이에요. 그러면 바탕화면의 아이콘과 텍스트를 같은 컬러로 쓰면 안 되겠다는 생각이 들죠? 면적에 따라 색상을 조금씩 조정해야 아이콘과 텍스트를 함께 보았을 때 이질감 없이 자연스럽게 보여요. 좋은 경험을 위한 UI/UX 디자인에 이런 디테일이 필요해요.

결국, 이 UI가 왜 좋은지 설명을 해야 하거든요? 감각이 타고난 사람들은 말을 안 해도 디자인을 잘해요. 하지만 잘 못 하는 사람이 잘하고 싶을 때는 설명을 듣고 그 기준에 맞춰서 해야 하는데, UI 디자이너가 설명을 못 하면 안 되잖아요. 디자인을 잘하고 싶다고 했을 때는 이런 이론적인 부분들을 인지하는 게 디지털 디자인을 이해하는 데 중요해요.

김: 실무에서의 사례가 있을까요?

서연주: 타이포그래피는 편집 디자인 분야에서 서체와 이미지 배치를 구성하고 표현하는 용어에요. 이 개념이 웹이나 모바일에서도 그대로 사용되는데, 잡지나 편집 디자인에서 중요하게 생각하는 레이아웃, 여백 등이 디지털 디자인에도 그대로 적용돼요. 64나 48 같은 8의 배수로, 혹은 4의 배수로 타이틀, 본문, 세부 사항 등의 폰트 사이즈를 정한 요소들이 아까 말씀드린 디지털 시스템에도 다 포함되거든요. 그래서 이런 법칙이나 기본을 알면 내가 혼자 작업을 하더라도 훨씬 더 조화롭게 디자인하는 방법들을 익힐 수 있어요.

이것이 바로 황금 비율의 그리드 시스템!

4. UI 디자이너가 되기까지

김: UI에 관심을 갖게 된 계기가 있으신가요?

서연주: 예전 에이전시에서 현대카드 앱 프로젝트에 참여했을 때에요. 새로운 버튼의 크기를 정해야 하는 이슈가 생겼어요. 아예 없던 사이즈와 컬러의 버튼을 정해야 했죠. 브랜딩과 그래픽적 관점에서 이 컬러와 사이즈가 어떤 과정을 통해 정해졌는지, 그 이유를 정말 논문처럼 써서 메일 보냈죠. 그때가 UI에 깊게 발을 담근 첫 계기였는데 정말 재미있었어요. 그리고 현업에서 바로 납득하고, 쉽게 결정이 났는데 그때 굉장한 희열감을 느꼈어요.

김: 처음부터 UI 디자이너가 아니었군요?

서연주: 사실 저는 컴맹이었어요. “기술을 배우면 다 먹고살 수 있다”고 말씀해주신 아버지 권유로 컴퓨터 정보학부로 입학했고, 프로그래밍을 배웠어요. 사실 저는 뭘 해야 할지 모르고 꿈도 없었던 상황이었거든요.

김: 그러다가 어떻게 디자인을?

서연주: 개발자가 되는 공부를 하면서 이 까만 화면에 프로그래밍 글자만 보고는 못 살겠더라고요. 그래서 컴퓨터를 배웠고, 난 미술을 좋아하니까 웹 디자이너를 해야 하나? 이 중요한 진로를 아주 단순히 결정해버렸네요.

김: 웹 디자이너면 포토샵은…?

서연주: 다 독학했어요. 저는 코딩도 다 책 보고 찾아보면서 했고 주위 선배들이 다 전산정보학부 분야다 보니 디자인쪽 포트폴리오를 알려주는 사람이 당연히 없죠. 플래시를 배웠는데, 웹사이트 메인 페이지에서 플래시를 통해 서브 페이지로 연결하는 걸 아무도 모르던 시절이었죠. 결국 독학으로 알아냈어요! 첫 회사에서는 퍼블리셔로 시작했고 포토샵을 할 줄 아니 간단한 웹페이지 디자인 운영도 맡게 된 거죠.

김: 그러다가 어쩌다 UI로?

서연주: 8년 전, 스마트폰의 등장! 아이폰 나오고 나서부터에요. 그때부터 본격적으로 UI와 UX를 공부했는데 재밌더라고요. 에이전시 다닐 때 제가 모바일에 관심 있는 걸 알았고, 아까 말씀드린 현대카드 모바일 앱 프로젝트를 맡았어요. 모바일 앱을 처음 다뤄보는 경험이었는데 공부한 내용을 실무에 적용해보니 너무 재미있어서 여기까지 왔죠. 저는 그래픽적인 창의성은 별로 없어서 손으로 그림 그리는 일을 제일 못해요. 프로젝트를 진행하면서 저에게는 UI가 더 잘 맞는 성향이라는 걸 깨달았어요.

김: 네? 크리에이티브 왜 창의적인 면이 없으면 UI가 맞는 걸까요?

서연주: 그래픽적인 표현들이나 창작의 욕구, 예쁘고 멋있는 작품을 만들고 싶다 이런 창작 욕구가 있는 사람들은 광고, 그래픽, 브랜딩 디자인 계열이 많아요. 물론 창의성이 있는 사람들이 UI 성향에 맞기도 하지만, 저의 경우에는 디자인 원칙이나 심리 등을 기반으로 디자인 요소의 문제를 해결하고 연구하는 UI가 잘 맞았던 것 같아요.

김: 2021년에 UI나 UX의 트렌드는 어떤 게 될까요?

서연주: 음성 사용자 인터페이스(VUI), 증강현실(AR), 마이크로 인터랙션과 많이 연결될 것 같아요. 3D 몰입형 경험 디자인이나 AI가 들어가는 기능이 부각될 수 있죠. 최근 접이식 디스플레이가 개발됨에 따라 새로운 방식의 UX/UI가 트렌드로 떠올랐어요. 저는 개인적으로 데이터에 관심이 많아요. 특히 데이터 시각화인데 서비스들이 개인 맞춤화를 위한 정보의 제공을 위해 대시보드 형식의 데이터 시각화를 생각할 때가 아닌가 싶어요.

AI가 발전할수록 우리한테 정말 효율적이고 좋은 도구가 하나 생긴 거고 어떤 현상이 일어났을 때 결정을 해야 하는 건 결국 사람이라고 생각해요. 그래서 일단 올해부터 공부를 시작하기로 했어요. 사이버대학교에 입학하려고 서류를 썼고. 입학 결과를 기다리는 중이에요. 빅데이터 전공으로 데이터를 공부하고, 대시보드 UI 디자인으로 진로 방향을 잡아보았어요.

짜잔! 멋진 대시보드!

김: 마지막 질문인데, 디자이너들이 실무에서 오래 일하려면 어떻게 해야 할까요?

서연주: 필드에서 오래오래 디자이너로서 일할 방법은 시대의 흐름에 맞춰 “어떤 분야에서 어떤 일을 할 수 있을까?” 계속 테스트해 보는 거에요. 새로운 기술과 필요한 이론을 익혀나가면 나이와 상관없이 그동안의 노하우와 경력을 인정받고 필요한 사람이 될 수 있지 않을까요? 누구라도 필요해서 데려갈 수 있는 좋은 인재, 가치 있는 사람이 되고 싶어요.