뉴턴의 UX/UI 고민을 ‘이 방법’으로 해결했어요

<서비스를 만들기 전에 페르소나 다섯 명을 구상했다>에서 인사하셨지만, 한 번 더 소개 부탁드려요!

안녕하세요. newturn의 프로덕트 디자이너, 이영현입니다. 기획과 디자인을 담당하고 있어요.

언제부터 프로덕트 디자이너를 준비하셨나요?

대학에서는 정보보호학과를 전공했지만 흥미는 많이 없었어요. 그저 문과임에도 수학 문제를 푸는 일을 좋아했어요. 특히 프로그래밍 언어나 이산수학 문제를 푸는 게 재밌었죠. 심화 과정으로는 보안 지식을 다뤘어요. 여기서부터 흥미가 줄어드니 제가 진짜 하고 싶은 게 무엇인지 생각하게 되더라고요. 적성이나 흥미를 찾기 시작했어요. 웹사이트를 만들 때, 미적인 부분이나 디자인에 관심이 가는 저를 보면서 디자인 쪽으로 진로를 찾았어요. 브랜드 디자인이나 그래픽 디자인은 아무래도 미대를 전공한 친구들에게 특화된 분야 같았고, 저는 공대생으로서 전공 지식을 최대한 살릴 수 있는 디자인을 찾아봤죠. 그게 프로덕트이자 UX/UI 디자인이었어요. 심미적인 시각 뿐만 아니라 논리력과 추론력, 문제해결능력이 필요한 분야였어요.

디자인으로 직무를 돌리려니 어려웠을 것 같아요.

진로 상담부터 시작했어요. 그 과정에서 프로젝트에 직접 임하며 멘토링까지 받을 수 있는 프로그램을 알게 됐고요. 기획부터 개발 직전의 UI 까지 맡을 수 있는 스터디를 발견하기도 했어요. 지원해서 합격한 뒤로는 여덟 명이서 여섯 개의 프로젝트를 진행했어요. 포트폴리오를 준비하다가 원티드의 프리온보딩 프로그램을 만났고, 그 프로그램에 참여한 기업 한 군데에 지원해 본격적으로 일을 시작했답니다.

지금은 newturn의 프로덕트 디자인을 맡고 계신데요. newturn은 어떤 서비스인가요?

newturn은 투자자가 좋은 투자기준을 찾아가는 여정을 함께 하겠다는 이념으로 시작한 서비스예요. 투자 기준 모델을 탑재한 AI 분석 메이트를 활용해, 투자 대상을 누구나 쉽게 분석할 수 있도록 하는 것이 목표죠. newturn은 이곳에서 만나보실 수 있어요.

기업 분석으로 주식 관점을 기르는 서비스인 만큼, 다소 어려운 정보가 많을 것 같아요. 그래서인지 무엇보다 쉬운 UI가 필요했을 것 같은데요. 어떤 마음으로 디자인을 하셨나요?

‘설명이 필요한 UX는 쉽지 않다’는 문구를 기억하려 했어요. 쉬운 서비스를 만들어야 한다고 늘 생각했어요. 튜토리얼이 제공되지 않아도 바로 쓸 수 있는 서비스를 만들고 싶었어요. 어떤 디자이너 분의 말씀에 영향을 받았어요. “작은 글씨를 읽지 않고 지나쳐도 바로 쉽게 알아볼 수 있어야 한다”는 말이었어요.

금융 자체는 토스나 카카오뱅크로 많이 쉬워졌지만, 주식 투자는 매매 차트 외에 쉽게 분석할 수 있는 게 거의 없다고 느꼈어요. 게다가 주식 투자는 재테크보다 변동성이 높아 정답이 없죠. 정답이 없으면 기준이라도 있어야 하는데, 전문가 조차도 기준을 세우기가 어렵다고 하더라고요. 만약 기준이 있더라도 그 기준을 지키기 어렵고요. 투자 기준을 세우고, 투자 기준을 일관적으로 가져갈 수 있도록 도와주는 서비스를 만들고 싶었어요.

newturn의 첫 투자 기준 캐릭터인 ‘베니’가 떠올라요. 덕분에 많이 쉬워진 것 같아요.

벤자민 그레이엄의 여섯 가지 투자 기준을 적용한 ‘베니’는 가장 일반적인 기준을 제시한다고 생각해요. 하지만 그 기준도 스스로에게 맞지 않는 기준이 될 수 있으니 분석 메이트를 확장할 예정이에요. 여러 분석 메이트를 활용하다 보면 문득 이런 마음이 들 거예요. ‘내 기준으로 커스터마이징 하고 싶다’는 마음이죠. 그래서 newturn의 로드맵 마지막 단계는 커스터마이징 분석 메이트가 생기는 거예요.

newturn을 디자인하며 가장 큰 고민이 있었다면 무엇일까요?

그래프가 개발하기 참 까다로워요. 차트 자체를 개발하는 게 까다로우니, 사용자도 편하게 보면서 개발자도 쉽게 개발할 수 있으면 얼마나 좋을까 싶었어요. 물론 쉽게 디자인했다고 생각했는데도 프론트엔드를 개발할 때 수정할 부분이 많았어요. 사용성을 최우선으로 하는 건 맞지만, 프론트엔드 개발자 분과 합의해서 지금 우리 단계에서 구현할 수 있는 범위로 맞췄어요. 또, newturn이 정보가 많아요. PC에서는 UI 디자인이 어렵지 않았는데, 모바일로 볼 생각을 하니 어떻게 잘 보이게 할 지 고민이 되더라고요. 모바일과 PC 버전의 중간 지점을 잘 찾으려 했어요.

중간 지점을 찾았나요?

PC로 newturn을 볼 때의 중요도는 ‘모든 정보가 한눈에 보이는 것’이에요. 하지만 모바일에서는 한눈에 보여주려면 UI가 작아져요. 그래서 스크롤을 택했어요. 스크롤하며 넘기는 일이 어려운 작업은 아니니 한눈에 볼 수는 없더라도 보기 편하도록 만들었죠. 그래프도 원래는 세로로 세워져 있는 바 그래프 였는데, 모바일로 옮기면 자리도 차지할 뿐더러 유지 보수하기도 번거로워 지금의 형태로 만들어졌어요.

newturn을 디자인하며 가장 크게 기억한 키워드가 있을까요.

한 번에 ‘이 종목이 어떤 상태구나’ 라는 생각이 들었으면 했고, ‘그러면 이렇게 하면 되겠구나’ 라고 분석할 수 있었으면 했어요. 자세히 들여다보는 게 아니라 한눈에 보고 알았으면 했어요. 현재와 미래를 한 번에 그릴 수 있도록요. newturn의 각 그래프를 보면, ‘추천 투자 기간’이 몇 개월이고 가장 낮은 가격보다 몇 퍼센트가 낮은지 큰 글씨로 쓰여 있어요. 가장 잘 알았으면 하는 정보를 크게 배치했죠. 키워드로 말한다면 ‘인지’ 겠네요.

피그마를 잘 다루시잖아요. 피그마를 잘 쓰는 팁이 있을까요?

UX 스터디를 할 때 피그마를 시작했어요. 이후에는 인스타그램이나 유튜브 강의를 자주 들여다봤어요. 필요할 때마다 찾아봤죠. 실전에 자주 쓰는 기능을 배우고 적용하는 과정이다보니, 습득할 때 그렇게 했어요. 내가 지금 어떤 게 필요한지 피그마를 쓰면서 알아보고, 영상이나 카드뉴스에서 도움을 얻는 식으로요.

newturn을 보면 다정하고 친화적인 문구가 많다는 느낌이 들어요.

다행이네요. 주식 투자가 불안한 것만 아니라 믿을 구석이 있어 안정되기를 바라는 마음으로 사용자 친화적이게 적었어요. 안정된 마음을 가질 수 있도록 돕는 곳을 newturn으로요. 토스를 많이 참고했죠.

여정을 주제로 한 newturn MVP의 랜딩 페이지는 어떻게 기획됐나요?

사용자가 서비스를 통해 겪는 여정을 세 단계로 구현한 게 있어요. newturn의 브랜딩을 하며 착안한 거죠. 마케터 요아님이 “직감에 기댄 주식 투자는 졸업!”이라는 메인 카피를 쓰셨을 때 “뭔가를 끝내고 다시 시작하는 졸업이라는 의미를 담았다”라고 해주셨잖아요. 기획할 때 들었던 생각과 그 이야기를 듣고 여정을 직접적으로 표현하면 좋겠다고 생각했어요. 사용자가 겪는 여정 자체가 newturn과 맞닿아있죠. newturn에서 경험할 수 있는 것을 시각적으로 인지할 수 있도록 전달하고 싶었어요. 직접 얘기하지 않아도 ‘내가 길을 걷고 있구나’라고 느끼는 것처럼요. 길을 걷고, 이 여정을 거치다보면 나만의 투자 기준을 기를 수 있겠다는 마음이 들도록 꾸렸어요.

끝으로, 랜딩 페이지를 디자인하는 건 어땠나요.

레퍼런스를 찾는 과정에서, 아직 성장할 부분이 많다는 걸 느꼈던 것 같아요.

처음의 랜딩 페이지는 텍스트 크기가 비슷하고 컴포넌트도 비슷했어요. UI가 잘 보이지 않았고요. 그러다가 타이틀은 확 키우고 설명은 작게 넣는 것처럼 제대로 특정 문구를 강조한 레퍼런스가 눈에 들어왔어요. 그래서 랜딩 페이지에서 강조하고 싶은 부분은 확실히 드러내는 느낌으로 발전시켰어요.

베니를 다양한 곳에 등장시켰는데, 모바일이나 태블릿 환경에서는 아쉽게도 베니가 안 보이는 곳이 있어요. 프레임이 약간 작기 때문인데, 그런 환경에서는 브라우저 폭이 점점 늘어나면 베니의 모습이 점점 드러나는 방식을 선택했어요.

마지막으로, 우리가 MVP 단계에서 제공하고자 하는 기능은 확실하게 설명했다는 것은 만족스러워요. 하지만 지인들의 이야기와 커뮤니티에서 들어오는 피드백을 보면서 우리가 사용자에게 주고 싶은 가치가 정확히 드러나지 않았다는 생각이 들더라고요. newturn이 분석 메이트와 함께 사용자 본인만의 투자 기준을 만들어갈 수 있는 서비스라는 것을 확실히 인지할 수 있도록 서비스를 점차 개선해나갈 계획이에요.