2018. 2. 22. 07:50ㆍpxd 다이어리 & 소소한 이야기
HCI KOREA 2018 "Trans-Humanity, 경계의 확장” 참관 후기의 마지막 제3편을 공유해 드리겠습니다.
CRACKER9 솔루션 개발을 위한 ZEPLIN, INVISION을 활용한 모바일 앱 개발 사례 - 최우식 외 1명(HNINE)
작성자: 이준
들어가며
저는 매우 많은 시간을 업무 효율에 투자하는 사람입니다. 보통은 프로젝트 시작 전에 컨셉에 맞는 효율적인 앱 구조를 구상하고, 그에 적합한 Framework을 선별한 뒤에 Task Runner나 Bundler를 세팅하고 테스트하는 것을 즐깁니다. 한 역할 내의 효율성은 경험이나 노력, 그리고 여러 가지 시도로 점점 개선할 수 있지만, 프로젝트 진행에 있어 허들은 결국 역할과 역할 간의 '소통' 입니다. 이런 소통의 사이엔 정해진 양식의 산출물이 존재해 왔었으니까요. 자, 문제를 해결하는 가장 궁극적인 방법은 그 문제를 없애버리는 것이라고 합니다.
1. Zeplin, inVision 그리고
Zeplin과 inVision이 그렇듯, Cracker9 솔루션은 디자이너와 디벨로퍼 사이의 허들 하나를 없애는 데에 초점을 맞추고 있습니다.
2. Collboration Tool
사실 Cracker9 솔루션은 현재 진행형이고, 평가를 할 수 있는 단계는 아닙니다. 때문에 이 자리를 빌어 각종 툴에 대한 짧은 얘기를 해보려 합니다. 앞서 말한 '기본적인 기능' 에 대한 얘기죠.
WYSIWYG이 그렇듯, 협업 툴은 만능이 아닙니다. 소통의 많은 부분을 원만하게 만들어 주지만, 또 다른 문제점 들을 항상 일으키죠. 퀄리티를 위해서 디자이너와 디벨로퍼는 서로 이런 문제에 대해 인지하고 있어야 합니다.
첫 번째 문제는, Zeplin이 생성해준 Attribute들이 '충분히 가독할 만한 수준의 것'이지 결코 완벽하지 않다는 점입니다. 많은 분이 Sketch로 작업 된 하나의 아트보드가 '그대로' 스크린에 옮겨질것 이라고 생각하는데, 실제로는 각 플랫폼별로 렌더링하는 방식이 다르기 때문에 같은 속성값을 갖고 있다고 하더라도 다르게 보입니다. 특히 Typography, Shadow, Gradient를 표현하는 방식이 매우 다른데, 이런 차이에서 오는 문제가 매우 치명적으로 다가오는 디자인일 경우엔 컴포넌트의 속성값을 미리 조율할 준비를 해야 합니다. Unit도 문제인데, Web 플랫폼의 개발일 경우엔 Zeplin이 던져준 말도 안 되는 소수점이 괴로울 때가 있고, REM처럼 상댓값을 이용한 디자인을 던져주는 것이 아직은 쉽지 않습니다.
두 번째 문제는 Assets입니다. 앱 퍼포먼스의 기본은 리소스의 최소화 및 최적화인데, 아무런 옵션 없이 추출된 에셋들을 신뢰할 수 없는 경우가 많습니다. png의 무손실 압축 여부라던가. 또, 상황에 따라서는 분명 progressive jpeg이나 webp 같은 타입이 필요한 경우도 있고, svg가 적합한 경우도 있습니다만 매번 추가적인 공수 -plug-in을 찾거나, 직접 하거나- 가 필요한 경우가 많죠.
물론 이건 앉으면 눕고 싶다는 식의 불평 이거나, 이제 막 걸음마를 떼기 시작한 모든 협업 툴에 너무 큰 기대처럼 보일 수도 있겠지만. 중요한 건 디자이너도, 디벨로퍼도. 결국엔 어떤 형태로든 리스크가 존재한다는 걸 충분히 인지해야 하고, 보다 정교하고 완벽하게 디자인하기 위해선 결국 스스로 공부하고 노력해야 한다는 점이지요.
마치며
디자이너가 디자인할 수 있는 환경을 디자인하는 디자이너.
디벨로퍼가 디벨롭할 수 있는 환경을 디벨롭하는 디벨로퍼.
그리고 그들 사이의 소통을 디자인하고 디벨롭 하는 사람들.
저는 어떠한 형태로든, 우리 자신을 위해서 고민하고 생각하는 행위 그것만으로도 충분히 가치 있으며, 아름답다고 생각합니다.
카카오뱅크 : 새로운 은행을 만들다 - 고정희 이사 (카카오 뱅크 서비스총괄팀)
작성자: 박재현
카카오 뱅크를 총괄하여 기획한 고정희 님은 카카오뱅크의 사용자 경험을 기획하고 서비스가 출범하기까지 2년간의 여정에 대해 공유해주었습니다.
1. 배경
카카오뱅크는 2015년 11월 금융감독원으로부터 인터넷 전문 은행 예비 인가를 받았습니다. 2년 뒤, 카카오뱅크는 2017년 7월 27일 공식적으로 서비스를 오픈합니다. 출범 당일 24시간 동안, 카카오뱅크에서 사람들이 개설한 계좌 건수는 24만 건이었습니다. 이는 2016년 한 해 동안 시중 은행에서 개설한 비대면 계좌 개설 건수 15.5만 건을 훌쩍 뛰어넘는 수입니다.
2. 은행업의 본질에 대해 고민하다.
카카오 뱅크의 서비스 기획팀은 시작 단계에서 ‘은행업이란 무엇이고, 인터넷 전문 은행의 본질은 무엇인가?’를 고민했다고 합니다. 은행의 역사를 공부하여, 업의 본질을 정의하였습니다. 그 뒤에, 카카오뱅크만의 새로운 관점으로 은행과 돈을 재해석하였습니다. 카카오뱅크가 내린 결론은, 인터넷 전문 은행이란 ‘디지털 머니 컨테이너'라는 것입니다. 사회 집단 중 은행만이 유일하게 돈을 보관하는 임무을 수행하기 때문입니다.
3. 서비스 방향을 정의하다.
(1) 인프라 비용을 절감하고, 그 비용으로 금리 혜택을 제공하자.
카카오 뱅크는 사람들이 방문할 수 있는 지점이 없습니다. 시중 은행들이 영업점을 거점으로 인터넷 뱅킹, 모바일 뱅킹을 제공하는 것과 대조적입니다. 카카오 뱅크는 지점이 없기 때문에 인건비, 임차료와 같은 고정비용이 들지 않습니다. 절감된 비용으로 금리나 수수료를 인하하여, 사용자에게 혜택을 돌리자는 결정을 내렸다고 합니다.
(2) 뛰어난 사용성으로 기존 금융권의 벽을 넘자
카카오 뱅크 기획팀은 서비스 이용 시간, 즉, 사람들의 노동 시간을 줄이는 것을 목표로 서비스를 기획하였다고 합니다. 시간이 금이라는 말이 있습니다. 뱅킹 서비스를 빠르고 편리하게 이용한다는 것은 서비스를 사용하는 비용이 줄어드는 효과를 냅니다. 이를 위해 불필요한 절차를 없앴습니다. 이 과정에 관하여 뒤에서 자세하게 이야기하겠습니다.
(3) 모바일로만 사용하는 은행
기획팀은 오로지 모바일 하나로 서비스하자는 결정을 내렸습니다. 팀 내에서도 토론을 거듭해 내린 결정이었습니다. 시중 은행은 영업점, PC 뱅킹, 모바일 뱅킹 채널로 고객과 소통합니다. 하지만 카카오 뱅크 기획팀은 PC와 모바일의 사용성이 다르다고 판단했습니다. 두 사용자를 모두 만족시키는 서비스를 구현할 수 없다는 겁니다. 대한민국의 스마트폰의 사용률은 91%로, PC와 노트북 사용률인 73%를 웃돌고 있습니다. 따라서 모바일 채널 하나에 집중하여 카카오 뱅크 서비스를 제공하기로 했습니다. 고정희 님은 향후 AI 스피커, 구글 스마트카와 카카오 뱅크를 어떻게 접목할지 고민하고 있다고 합니다.
4. 서비스 만들기
(1) 불필요한 것 버리기
기획팀은 초기 단계에서 ‘이 절차가 꼭 필요한지?, 왜 필요한지?’ 라는 질문을 던졌습니다. 계좌 비밀번호를 예를 들어 봅시다. 우리는 그동안 계좌에 비밀번호가 있는 것을 당연하게 여겼습니다. 기획팀은 '계좌 비밀번호가 꼭 필요한가?, 이에 관련된 규제가 있는가?, 그 규제는 타당한가?' 라는 질문을 던졌습니다. 실제로 확인해 보니 규제가 존재하지 않았고, 계좌 비밀번호를 없앴습니다. 이렇게 당연한듯하지만 불필요한 절차를 생략하여 사용자의 시간을 절약합니다. 모바일 앱 ID/PW, 공인인증서, 계좌 비밀번호. 다른 은행에는 있지만, 카카오뱅크에 없는 것들입니다.
(2) 공인인증서
공인인증서가 이제 필수가 아니라는 사실을 알고 계셨습니까? 2014년 전자금융거래법 개정안이 통과되면서 공인인증서 의무 사용 조항이 삭제되었습니다. 이제 은행은 자율적으로 보안 방식을 선택할 수 있습니다. 공인인증서를 사용하기 이전, 은행은 각자 고유한 인증 체계를 가지고 있었습니다. 은행 각기 다른 인증 체계가 불편해졌고, 공동으로 사용할 수 있는 공인인증서가 개발되었습니다. 시간이 지나, 컴퓨터 사용 환경이 변화했습니다. ActiveX 플러그인을 설치하느라 시간이 걸리고, 맥에서 호환이 잘 안 되어 불편함을 느끼는 사용자가 많아졌습니다. 카카오 뱅크에서는 공인인증서나 OTP 인증을 사용하지 않고 이를 핀 번호 입력, 패턴 잠금, 지문 인식 등으로 대체했습니다.
카카오 뱅크가 관례를 깬 것이 은행업계에 긍정적인 영향을 미치고 있습니다. 생체 인증을 올해 아니면 내년부터 허용하자는 논의가 진행 중입니다.
(3) 설득하기
비대면 계좌 개설 시 본인 인증 방식에는 두 가지가 있습니다. 정 이체 방식과 역 이체 방식입니다. 정 이체 방식은 시중 은행이 사용하는 방식으로, 다른 은행에서 현금을 이체받아 인증하는 방식입니다. 역 이체 방식은 역으로, 다른 은행 계좌에 1원을 이체해 인증받는 방식입니다.
정 이체가 아닌 역 이체 방식으로 본인 확인을 하면 사용자가 넘겨야 하는 화면이 6페이지 이상 줄어듭니다. 초기 금융위원회는 카카오 뱅크 측에 정 이체 방식으로 본인 인증을 하도록 요청했습니다. 카카오 뱅크는 이에 논리적으로 질의하며 왜 역 이체 방식을 사용하면 안 되는지 물었습니다. 끈질긴 설득을 통해 사용자 편의성을 관철하였습니다.
5. 느낀 점
2년간의 여정에서 카카오 뱅크 기획팀이 집중한 두 가지가 있습니다. (1) 은행이 편리한 경험이 될 수 있다는 것을 보여주는 것. (2) 카카오 뱅크의 서비스 경험을 업계의 기준으로 만드는 것입니다. 카카오 뱅크는 2017년 구글 플레이스토어 및 앱 스토어에서 최우수 앱으로 선정 되었습니다. 이에 따라, 시중 은행의 모바일 앱도 개편되고 있습니다. 카카오 뱅크가 은행 서비스의 사용성을 높이는데 큰 기여를 하고 있다는 생각을 합니다. 카카오 뱅크가 앞으로 카카오톡이라는 국민 메신저 플랫폼, 카카오 페이, 카카오 택시 등과 낼 시너지 효과를 기대합니다.
이상으로 HCI KOREA 2018 참관 후기를 마칩니다.
2007 : 모바일 인스턴트 메신저의 UI 연구 (이재용,한상택,강석무)
2008 : 혁신적인 UI를 위해 하지 말아야할 7가지 방법론 (이재용)
2009 : 혁신적인 UI를 위하여 하지 말아야할 7가지 원칙 (이재용)
2010 : 퍼소나, 최근 쟁점과 사례 (이재용)
2011 : Rapid User Research (전성진)
2012 :
2013 :
- 행동경제학과 UX_사용자의 행동 변화 이끌어내기 (박기혁)
- 하루 만에 User에게 몰입하게 하는 실전 Rapid Persona! (송영일,조준희,천정은,노미연,장수길)
- 수평-수직 사고기법을 활용한 Intensive Workshop (김금룡,김규희,진현정,황현호,이채민)
- 의료서비스에서의 UX (허유리)
- 무작위 오브젝트를 활용한 아이데이션 워크숍 (김동후,김예리,이은영,문한별,최성은)
- 순수한 관심으로 사람의 경험을 바라보는 In-Depth Interview Workshop (조준희,장수길,진예송,노미연,이가현,정유리)
- 새로운 디스플레이 환경에서의 GUI 디자인을 위한 실용적인 디자인 팁(Tip) 공유 (최은영)
2017 :
- 컨텍스트 시나리오 중심 프레임워크 디자인 워크숍 (김준, 진예송, 이가현, 이윤재)
- 디자인 씽킹 툴킷을 활용한 실습 워크숍 (오진욱, 이주형, 김수향)
- MMORPG 사용자 조사 사례에 기반한 게임 UX전략 제안 (이범진)
- 공공디자인을 위한 User Research (진현정, 정다영)
- 시나리오 기반의 대화형 UX 기획 및 챗봇 제작 실습 (허조강, 우종희, 진현정, 이윤재)
- Data Driven UX Design Process (전성진)
- 제한된 상황 속에서 래피드하게 UX 디자인하기 (위승용)
- 투명플렉시블 디스플레이를 활용한 UI 시나리오 개발 (문한별, 오진욱)