Beautiful Interface
아름다운 인터페이스 디자인
A. 전문가 소개
김영준
디자인 스튜디오 심플 컴플렉스(simplecomplexstudio.com)의 파운더이자 디자인 디렉터로서, 디지털 제품과 브랜드 경험 전반의 디자인을 이끌고 있으며, 연세대학교 시각디자인학과에서 인터랙션 디자인 수업을 맡고 있다. 초기 스타트업에서 유니콘 스타트업까지 10년 이상 프로덕트 디자인을 경험했으며, 가장 최근에는 29CM(무신사)에서 프로덕트 디자인 리드로 제품 디자인 매니지먼트, 팀 매니징, 디자인 시스템 운영을 이끌었다.
B. 수업 개요
우리는 대부분 80%쯤 완성된 인터페이스에서 멈춘다. 문제는 해결된 것처럼 보이고, 화면도 그럴듯해 보이기 때문이다. 이 수업은 그 지점에서 '정말 이 정도면 됐을까?'라고 한 번 더 묻는다. 이때 기준은 직관이나 취향이 아니라, 이 화면에서 사용자가 얻어야 할 핵심 경험이다. 아무리 화려한 효과라도 핵심 경험을 방해하면 덜어내고, 아무리 사소한 디테일이라도 경험을 살린다면 놓치지 않는다.
그래서 매 작업은 이 화면의 핵심 경험이 무엇인지 정의하는 데서 시작한다. 그 기준 위에서 인터페이스를 다듬는다. radius 하나, shadow 하나도 왜 이 맥락에서 이 값이어야 하는지 설명할 수 있을 때까지, 화면의 모든 요소가 하나의 체계로 어울릴 때까지 집요하게 다룬다. 인터랙션도 같은 태도로 다룬다. 스크롤 하나, 스와이프 하나도 화면과 따로 놀지 않고 어울리게 만든다. 완성한 화면은 매번 공개하고, 피드백에서 발견한 지점부터 다시 시작한다. 이렇게 완성도를 120%까지 끌어올려 고점을 한 번 넘어본 뒤에는, 처음 보는 인터페이스 앞에서도 어디를 더 밀어붙여야 아름다워지는지가 보인다.
C. 학습 목표
Before
인터페이스와 인터랙션을 효과로 판단해서 화면이 화려해질수록 좋아졌다고 여긴다.
기능이 동작하면 완성된 인터페이스로 여기고, radius나 shadow 같은 속성 값은 레퍼런스에서 가져온 그대로 쓴다.
요소를 연결하는 수준으로 인터랙션을 붙이고, 값을 하나씩 바꿔보며 우연히 나아지기를 기대한다.
문제가 해결된 것처럼 보이는 화면에서, 무엇이 모자란지 찾지 못한다.
After
화면의 핵심 경험을 정의하고, 그것을 기준으로 어떤 요소를 더하거나 덜어낼지 판단할 수 있다.
radius나 shadow 같은 속성 값이 지각에 어떻게 작용하는지 파악하고, 화면에 모든 요소가 하나의 체계로 작동하는 인터페이스를 구현할 수 있다.
의도한 느낌을 인터랙션 요소의 선택과 easing, timing 같은 속성 값의 조합으로 만들고, 화면과 어울리는 인터랙션을 구현할 수 있다.
처음 보는 화면에서도 핵심 경험을 기준으로 완성도를 끌어올릴 지점을 찾아낼 수 있다.
인터페이스와 인터랙션을 효과로 판단해서 화면이 화려해질수록 좋아졌다고 여긴다.
화면의 핵심 경험을 정의하고, 그것을 기준으로 어떤 요소를 더하거나 덜어낼지 판단할 수 있다.
기능이 동작하면 완성된 인터페이스로 여기고, radius나 shadow 같은 속성 값은 레퍼런스에서 가져온 그대로 쓴다.
radius나 shadow 같은 속성 값이 지각에 어떻게 작용하는지 파악하고, 화면에 모든 요소가 하나의 체계로 작동하는 인터페이스를 구현할 수 있다.
요소를 연결하는 수준으로 인터랙션을 붙이고, 값을 하나씩 바꿔보며 우연히 나아지기를 기대한다.
의도한 느낌을 인터랙션 요소의 선택과 easing, timing 같은 속성 값의 조합으로 만들고, 화면과 어울리는 인터랙션을 구현할 수 있다.
문제가 해결된 것처럼 보이는 화면에서, 무엇이 모자란지 찾지 못한다.
처음 보는 화면에서도 핵심 경험을 기준으로 완성도를 끌어올릴 지점을 찾아낼 수 있다.