쉽게 인터랙션 디자인을 시작하세요!

일상 속에서, 종이보다는 휴대폰, 컴퓨터, 태블릿 등 모니터 디스플레이를 더 많이 사용하고 계시지 않나요? 기술 발달에 따른 생활의 변화가 디자인 환경에도 큰 영향을 주고 있습니다. 인터랙션 디자인을 이용한 사용자 인터페이스가 중요한 예시 중 하나입니다.

특히 컴퓨터 환경에서는 사용자의 반응과 행동에 따라 그때그때 다른 화면을 띄울 수 있으므로 인터랙션 디자인의 중요성이 더욱 부각되고 있습니다. 기술 발전에 따른 사회 변화에 민감하게 반응하기 위해서는 인터랙션 디자인에 대한 공부가 꼭 필요합니다.

과거의 인터랙션 디자인 과정은 코딩과 프로그래밍이 전부나 다름없었습니다. 그러나 이제는, 오직 그래픽 인터페이스만을 통해 인터랙션 디자인을 만들 수 있습니다. 코딩에 대한 부담감으로 인터랙션 디자인 시작을 미뤄왔다면, 이 글을 통해 최근 주목받는 인터랙션 디자인 툴을 살펴보고, 가벼운 마음으로 새로운 분야에 도전해 보길 바랍니다.

Part1：인터랙션 디자인?

인터랙션 디자인의 정의와 장점

인터랙션은 상호작용을 뜻합니다. 이 말 그대로, 사용자에 따라 개인화된 경험을 제공하는 디자인이 인터랙션 디자인의 정의입니다. 인터랙션 디자인의 장점은 크게 두가지로 나눌 수 있습니다. 첫째는, 개인화된 사용자경험이 더욱 높은 활용성을 선사한다는 점입니다. 두번째로, 인터랙션 디자인은 대개 컴퓨터나 모바일 디바이스 환경을 위해 제작되므로 디자인 자체가 데이터를 수집하는 툴로서 기능하는 것이 가능합니다. 이렇게 수집된 데이터를 통해 마케팅이나 연구를 위한 새로운 인사이트를 획득하는 것이 가능하며, 높은 수준의 프로그래밍을 이용한다면 수집된 사용자데이터를 학습하여 사용성이 점점 개선되는 인터랙션 디자인 모델을 구축하는 것도 가능합니다

인터랙션 디자인 분야의 경계

상술했듯, 인터랙션 디자인은 컴퓨터 환경을 바탕으로 어플리케이션과 사용자가 소통하기 때문에 꽤 높은 수준의 컴퓨터공학적 지식을 요구합니다. 인터랙션 디자인이라는 개념이 등장한 초기에는 스크립트 편집기를 이용해 코드를 작성하는 능력이 필수였습니다. 인터랙션 디자인에 대한 주목도가 점점 높아지며, GUI(그래픽 유저 인터페이스)를 이용한 편집기가 다양하게 등장한 오늘날에도, 백엔드(Back End)에 대한 기본적 지식이 있다면 큰 도움이 됩니다.

한편, 좋은 인터랙션 디자인은 사용자와의 정서적 유대감을 바탕으로 자연스럽게 행동을 유도합니다. 이 과정에서 즐거움을 선사하는 것은 당연하죠. 이를 위한 모델을 정교하게 다듬기 위해서는 심리학적인 지식과 인사이트가 꼭 필요합니다.

열거한 내용 외에도, 좋은 인터랙션 디자인을 위해서 필요한 지식의 분야는 다양합니다. 이것이 인터랙션 디자인 입문을 어렵게 느껴지도록 만들기도 합니다. 그러나 이것을 직면한다면, 새로운 지식을 깨우쳐가는 즐거움을 분명히 얻을 수 있을 것입니다.

Part2：인터랙션 디자인 툴 Top5

1. js

프로세싱(Processing)을 들어본 적이 있으세요? 뉴미디어아트 분야에서는 여전히 사용되고 있는 자바(Java) 기반 시각화 도구입니다. P5.js는 이를 자바스크립트(Java Script) 기반으로 구현해 웹 호환성을 높였습니다. 널리 사용되는 것은 아니고 프로그래밍에 대한 기본적인 지식이 필요해 크게 추천하지 않지만, 인터랙션 디자인 코딩 자체를 경험해보고 싶다면 시도해볼만 합니다.

2. 스케치(Sketch)

스케치는 가장 대중적인 인터랙션 디자인 저작 도구입니다. 출시 당시, 거의 유일하게 워크프레임 중심의 개발이 가능했기 때문인데요, 현재는 많은 툴이 워크프레임 중심 개발을 지원하고 있고, 스케치(Sketch) 어플리케이션 자체가 유료이며 디자인을 구현하기 위해 몇가지 유료 플러그인 구매가 필수인 데다가 맥에서만 지원된다는 단점이 있지만, 여전히 널리 사용되고 있습니다.

3. 피그마(Figma)

인터랙션 디자인을 위해 가장 많이 사용되는 툴 중 하나입니다. 피그마가 빠르게 시장을 점유할 수 있었던 이유는, 웹 기반의 툴로서 협업을 강조했기 때문입니다. 그러나 브라우저를 이용한다는 점에서 보안을 걱정하는 의견도 있습니다. 또한 한글과 관련해서는 아직 지원이 완벽하지 않아 버그가 발생한다는 단점이 있습니다.

4. 어도비 엑스디(Adobe Xd)

어도비에서 시장 요구에 맞춰 출시한 인터랙션 디자인 툴입니다. 어도비 프로그램과 호환성이 높고, 빠르게 워크플로우에 익숙해질 수 있다는 것이 큰 장점입니다. 그러나, 크리에이티브 클라우드 멤버십을 이용하는 중이 아니라면 비용이 부담될 수 있습니다.

5. Pixso

웹 기반의 툴로, UI/UX디자인과 인터랙션 디자인에 입문하는 디자이너에게 강력히 추천합니다. 설치가 필요 없고 협업이 편리해, 동료 디자이너 및 개발자와 사이드 프로젝트를 시작하기에 딱 좋습니다.

Pixso.net/kr에 접속해 계정을 만들거나 로그인하면 설치 없이 무료로 이용할 수 있습니다. 템플릿을 비롯한 리소스가 많아 빠르고 쉽게 디자인을 구체화 할 수도 있고, 다른 툴에서 작업하던 인터랙션 디자인을 Pixso에 불러오는 것이 가능합니다. 특히, Pixso는 실시간으로 디자인 디테일이 업데이트 되며, 댓글 기능을 사용할 수 있다는 특징이 팀 멤버와의 협업을 즐겁게 만듭니다.

작업 화면에서는 화살표를 통해 워크프레임을 한눈에 확인할 수 있고, 개발중인 인터랙션 디자인은 언제든 URL를 이용해 누구에게나 공유할 수 있습니다.

 

Part3：좋은 인터랙션 디자인을 위한 5가지 비밀

1. 사용자 환경을 기반으로 한 예측 가능성

대개 사람들은, 한 손에 휴대폰을 들고 엄지손가락을 이용해 화면을 조작합니다. 또, 오른손을 주로 이용하는 사람이 많죠. 때문에, 사용자가 편하게 화면을 터치할 수 있는 영역은 휴대폰 오른쪽 하단에 한정되어 있을 확률이 높습니다. 이렇게 사용자가 처한 조건을 점검하여 디자인 요소를 배치한다면, 사용자가 편안함을 느낄 것입니다. 트위터 어플리케이션이 좋은 인터랙션 디자인 사례입니다. 

 

2. 사용자 페르소나를 이용한 정서적 연결감

수많은 인터랙션 디자인 사이에서, 어떤 디자인은 유독 특별하게 느껴지지 않나요? 그것은 디자인이 특정한 취향이나 성격을 연상시키기 때문일지도 모릅니다. 해당 프로젝트의 주 사용자를 구체적으로 타겟팅하여 디자인 요소와 카피라이트의 톤앤매너를 통일시킨다면, 더욱 밀착된 사용자경험을 제공할 수 있습니다. 사용자가 프로젝트의 목적과 방향을 빠르게 이해하여 인터랙션 디자인이 구현하는 페르소나에 정서적 유대감을 형성하는 일이 서비스에 대한 신뢰로 이어집니다.

 

3. 단순하고 명확한 정보 전달

디자인 규모에 따라 많은 양의 정보를 전달해야 될 수도 있습니다. 모든 정보를 한 화면에 꽉꽉 눌러 담는 것은 사실상 불가능하죠. 따라서, 중요도에 따라 정보를 조직화하고, 이를 여러 페이지에 나누어 프로젝트를 작성할 필요가 있습니다. 이것이 인터랙션 디자인의 기본입니다. 잘 짜여진 내용은 좋은 지도와 같습니다. 사용자가 어떤 경로를 통해 어디로 도달할 수 있는지 쉽게 알 수 있고, 적은 탐색만으로도 전체 정보를 조망할 수 있게 해줍니다.

 

4. 심리학 기반의 사용자 행동 유도

사용자가 인터랙션 디자인 프로젝트에서 더 오랜 시간 머무르며, 상품을 구매하거나 사용자 데이터를 제공하길 유도하려면 세심한 전략이 필요합니다. 서비스를 이용하는 과정에서 지나친 팝업이나 강요하는 듯한 문구로 불쾌감을 느끼면 안되죠. 대표적인 예로서는, 많은 인터랙션 디자인 프로젝트와 서비스가 과정 중 종료나 취소 버튼을 누르는 경우 재고를 요청하는 팝업을 띄우는 것이 있습니다. 시스템 메시지나 경고문구 같았던 멘트도 더욱 부드러운 구어체로 바뀌었습니다. 이는 심리학적 관점을 적용한 변화입니다.

이외에도 사용자 행동에 큰 영향을 미치는 심리학적 요소로는 시선의 방향과 색채 대비 등이 있습니다. 이러한 사항을 전체적으로 고려해 사용자가 자연스럽게 다음 단계로 진행하거나 지속적으로 서비스에 머무를 수 있도록 인터랙션 디자인을 기획해야 합니다.

 

5. 안정성과 호환성

여러가지 사양의 휴대폰과 태블릿이 사용되고 있습니다. 프로세서나 전력 같은 기기 사양 외에도, 데이터 등의 외부 조건 또한 다양합니다. 그럼에도, 인터랙션 디자인을 이용한 서비스는 어떤 사용 환경에서도 의도를 완벽히 전달해야 합니다. 이 의도에는 심미성과 편안한 사용자 경험이 당연히 포함됩니다. 이를 위해서는 두가지 작업이 꼭 필요합니다. 첫째로, 다양한 운영체제나 웹 브라우저에서도 동일한 화면이 로딩될 수 있도록 호환성 작업이 필요합니다. 두번째로는, 어느 조건에도 빠르고 쾌적하게 인터랙션 디자인이 반응할 수 있도록 전력과 데이터, 프로세서 등의 리소스 사용 최적화 작업이 필요합니다.

 

맺는 글

인터랙션 디자인에 대한 궁금증이 조금이라도 풀리셨나요? UI/UX 디자이너에게 인터랙션 디자인은 꼭 마주칠 수밖에 없고 언젠가는 넘어야하는 거대한 산입니다. 컴퓨터공학 전문가 수준의 코딩 능력을 요구했던 과거와 달리, 현재는 디자이너의 직관과 눈을 여념 없이 펼칠 수 없는 인터랙션 디자인 툴이 다양하게 준비되어 있습니다.

그래픽이나 타이포그래피, 에디토리얼 등 출판물 디자인에 익숙한 분이시라면 컴퓨터 중심의 개발 환경 자체에 거리감을 느끼고 계실지도 모르겠습니다. 그러나, 사용자 중심의 관점을 가지고 명확한 정보와 심미적인 시각 요소를 전달해야 한다는 디자인의 기본 원칙은 동일합니다. 인터랙션 디자인은 패치나 업데이트가 가능하다는 점에서 오히려 안심이 될지도 모릅니다. 이 글을 계기로, 개별 사용자에 맞춰 다양한 경험을 선사하는 인터랙션 디자인만의 새로운 매력을 꼭 발견하시기를 바랍니다.