Prototype
Toss Signup Clone Design Figma Prototype
서비스 소개
서비스명 : Toss
Toss는 비바리퍼블리카가 운영하는 핀테크 스타트업이다. '간편송금'을 위주로 종합적인 금융 서비스를 실시하고 있다.
"사용자라면 누구나 불편함없이 공평하게 서비스를 이용할 수 있어야 한다"
이와 같은 철학덕분에, 토스는 쉽고 간편하다는 특징으로 많은 사용자를 보유하고 있는 서비스이다.
서비스 특징
Toss UI의 가장 큰 특징은 역시 1 thing/1 page가 아닐까 싶다.
이는 이번에 클론 디자인 주제가 되었던 Signup에도 잘 나타나있는데, 한 페이지에 오로지 하나의 항목만을 입력하게 하여 사용자가 느낄 수 있는 가입 절차의 복잡함과 번거로움을 최소화하였다.
이미지출처 : WWIT이처럼 같은 카테고리의 다른 APP(KakaoPay)와 비교하면 Toss의 특징이 더욱 확연히 드러난다.
이미지출처 : WWITToss 가입 화면의 또 다른 특징은 텍스트 필드를 역순으로 배치했다는 것이다. 지금까지 입력한 것들을 보여주면서도 새로운 입력 필드에 도달하기 위하여 따로 스크롤을 해야 할 필요도 없다는 점을 생각하면, 사용자의 불편함을 최소화하기 위해 부단히 노력한 UI라고 볼 수 있다.
하지만, 여기에서 한 가지 의문이 들 수 있다. "텍스트 필드가 역순으로 배치되면 오히려 사용자가 어색함을 느끼지 않을까?"라는 것이다. 그러나 이러한 의문을 Toss 사용성 테스트를 통해 해소하였다. 이는 toss tech 블로그에 자세하게 적혀있다.
toss tech : 거꾸로 입력하는 가입 화면, 처음에 어떻게 떠올렸을까?
아티클의 내용을 간단히 정리하자면, 사용자는 본인이 입력해야 하는 파란 라인의 텍스트 필드에 집중하기 때문에 이미 입력한 텍스트 필드의 순서에는 크게 신경을 쓰지 않는다는 것이었다. 이로써 Toss는 1 thing/1 page라는 디자인 철학을 지키면서도, 사용자가 느낄 수 있는 순서 배치의 어색함에 대한 의문도 해결한 채, 사용자가 더욱 편리하고 쉽게 느낄 수 있는 가입 화면을 만들었다.
회고
처음 시도한 클론 디자인
이번 클론 디자인은 내가 UX/UI design 공부에 입문한 후로 처음 제작한 클론이다. Figma 강의를 들으면서, "이걸 실무에서 대체 어디에 어떻게 쓴다는 거지?"라는 의문을 직접 해소하기 위해 맨 땅에 헤딩(...)처럼 시도한 클론 디자인이었기에, 아쉬운 부분이 매우 많이 느껴진다.
ⓐ 예를 들면, button의 prototype같은 것이다. 실제 Toss의 가입 화면 작동 방식과 최대한 비슷하게 구현하고 싶었기에 button에 간단한 Animation을 넣어 실제로 button을 클릭했을 때 button이 눌리며 약간 축소되는 모습, 클릭되는 모습을 만들고자 하였다. 하지만 막상 만들어보니 button이 좌측을 기준점으로 눌리는 모습을 볼 수 있었다. (이 부분을 아직까지도 해결하지 못했는데, 혹시 해결 방법을 아시는 분이 있으면 댓글 바랍니다...)
ⓑ 또한 약관에 동의하는 page에서는 본래 필수 항목을 모두 동의한 후에 '확인' button이 활성화되어야 하는데, 그 부분을 자세히 구현하지 못했다는 점도 많은 아쉬움이 남는다.
이 외에도 아쉬운 부분이 많지만, 가장 크게 느낀 문제점은 이 두 가지였다.
그러나 color와 icon/font size, margin 등을 기존 reference 위에 그대로 따라그리지 않고, 빈 페이지에서부터 시작하여 만들었다는 점, 기존의 icon이나 imege 등을 그대로 가져오지 않고 모두 직접 만들어 보았다는 점에서 매우 큰 의의가 있는 활동이었다. 개인적으로 모작을 하며 기존의 것을 그대로 따 오거나 그 위에 대고 그리는 것은 공부하는 데에 큰 의미가 없다고 생각하기에, 이러한 방식은 앞으로도 모작을 하면서 계속 유지를 할 생각이다.
다음 클론 디자인에서는...
이번 모작을 하며 design system을 새로 공부해보고 싶다는 생각을 했다. 하나하나 순서대로 만들다 보니, page 간의 일관성이 떨어진다는 느낌을 많이 받았기 때문이다. 이러한 문제를 해결하기 위해 design system을 미리 만들어 두고 시작을 하면, 작업 속도도 더욱 빨라지고 각 page도 서로 통일된 느낌을 보여줄 수 있지 않을까, 하는 기대가 있다.
새로운 것들을 계속 공부하고 시도해나가는 과정이 아직까지 너무나도 재미있다. 실무에서 일하면서도, 몇 년, 몇십 년이 지나도 이처럼 공부에 대한 열정과 흥미가 식지 않으면 좋겠다.
