토스(Toss)처럼 심플한 UI,디자인보다 중요한 것은

보이는 화면을 비우려면, 보이지 않는 '기술'이 필요하다!

by 비니

안녕하세요! 4년 차 UI/UX 디자이너 비니예요!


오늘은 디자이너라면 누구나 한 번쯤 들어봤을,

그리고 대표님들이라면 한 번쯤 말해보셨을 그 멘트에 대해 이야기해보려고 해요.


복잡한 기능 다 빼고, 그냥 토스처럼 심플하게 해주세요.


이 말을 들을 때마다 저는 속으로 광광 운답니다 ㅠㅠ.

왜냐고요?! 화면을 비워내는 게 디자이너 혼자만의 힘으론 절대 불가능하기 때문이죠.

오늘은 겉보기에 심플한 앱이 사실은 얼마나 복잡한 기술로 만들어지는지,

그리고 내 디자인을 찰떡같이 구현해 줄 개발팀은 어떻게 찾아야 하는지

제 경험담을 말씀해드리려고 합니당~!


image.png

토스(Toss)의 심플함, 디자인보다 개발 로직이 중요한 이유


많은 분등이

"심플한 디자인 = 요소가 적은 화면"

이라고 생각하시더라고요.


하지만 디자이너 입장에서 심플한 UX는 화면을 비우는 게 아니라

사용자가 할 일을 시스템이 대신해 주는 것을 의미해요!


예를 들어볼까요?!

회원가입 페이지를 기획한다고 생각한다면,

복잡한 앱: 아이디 입력, 비밀번호 확인, 주소 찾기, 이메일 인증, 통신사 인증...

위 처럼 사용자가 입력할 게 산더미죠 ㅠㅠ.

심플한 앱(토스): 버튼 하나 누르면 끝!


화면만 보면 후자가 훨씬 그리기 쉬워 보이죠?!

하지만 개발 관점에선 정반대예요.

버튼 하나로 가입시키려면 백엔드에서는 통신사 API를 찌르고,

기존 데이터를 불러와서 매칭하고, 보안 토큰을 발행하는 등

엄청난 데이터 통신이 일어나야 하거든요!


결국 "화면이 심플하다"는 건

"백엔드 로직이 엄청나게 고도화되어 있다"는 뜻이에요.

이걸 모르고 무작정 디자인만 비워내면?

껍데기만 예쁘고 작동은 안 하는 '예쁜 쓰레기'가 탄생하는 거죠 ㅠㅠ


image.png

토스(Toss)같은 스타트업 앱 개발 실패의 원인

백엔드 설계를 놓치는 실수



제가 주니어 시절에 진짜 많이 겪었던 상황인데요 ㅠㅠ.

사용자를 위해 입력창을 다 없애고

"서버에서 데이터 불러오기"로 기획해서 개발팀에 넘겼어요.

그런데 돌아오는 답변은 항상 비슷했죠.

"디자이너님, 이거 로직이 너무 복잡해져서 공수가 많이 들어요. 그냥 입력창 띄우는 게 나을 것 같은데요?"


외주 개발이나 MVP 제작 단계에서는 보통 '빠른 구현'이 목표다 보니,

복잡한 백엔드 설계를 기피하는 경우가 많아요.

그러다 보면 결국 제 디자인 시안엔 없던 입력 필드들이 하나둘 늘어나고...

결과물은 토스 감성은커녕, 90년대 관공서 사이트처럼 변해버리죠 ㅠㅠ


이때 깨달았어요. UX의 완성은 디자이너의 손끝이 아니라,

그 복잡함을 감당해 주는 개발자의 설계 능력에 달려있다는 걸요!



image.png

토스(Toss)같은 심플한 UXUI 구현하는 외주개발사 특징


그럼 우리 같은 디자이너나 기획자가 개발 파트너를 찾을 때,

포트폴리오에서 뭘 봐야 할까요?!

제 경험상 딱 3가지만 물어보면 답이 나와요!


1. 레거시 시스템 연동 경험 확인

단순히 새 앱을 만드는 것보다,

기존에 있는 복잡한 시스템과 얼마나 매끄럽게 연결했는지를 물어보세요.

심플한 UX의 핵심은 완벽한 통합에 있거든요!


2. "안 된다" 대신 "대안"을 제시하는지

무조건 "구현 어렵습니다"라고 자르는 곳은 피하세요 ㅠㅠ

"이 방식은 리스크가 있으니, 백엔드에서 이렇게 처리하는 건 어떨까요?"

라고 기술적 대안을 주는 곳이 찐 실력자예요.


3. 데이터 구조에 대한 이해도

디자인 시안을 확인하고

"이 데이터는 어디서 불러오나요?"를 묻는 곳은 믿음직스럽죠.

UI에 결국 데이터를 담아야 하니까요!



image.png

성공적인 앱 런칭을 위한 외주개발사 추천


최근에 "와, 여기는 진짜다" 싶은 팀을 만났지 뭐예요?! ㅎㅎ

보통 에이전시랑 일할 땐 제가 화면 설명을 하느라 진을 다 뺐는데,

이 팀은 접근 방식부터 달랐어요.


"여기서 사용자 입력 없이 바로 넘어가고 싶어요"

라고 했을 때, 보통은 안 된다고 하거든요?!

그런데 이번에 협업했던 외주개발사 똑똑한개발자 팀은 이렇게 역제안을 주시더라고요.


"그러면 여기서 사용자가 멈칫하지 않게, 저희가 백엔드에서 미리 데이터를 캐싱해 둘게요.
로딩 없이 바로 넘어가는 것처럼 보이게 처리 가능해요."

진짜 감동... ㅠㅠ 단순히 시안대로 코딩만 하는 게 아니라,

디자이너가 의도한 UX를 기술적으로 어떻게 풀어낼지를 먼저 고민해 주는 느낌?!

25.png

특히 인상 깊었던 건 보이지 않는 데이터 흐름을 설계하는 능력이었어요.

겉으로 보이는 UI 인터랙션도 중요하지만,

사실 앱 사용성은 데이터가 얼마나 빠르고 정확하게 꽂히느냐에서 결정되잖아요?

똑똑한개발자 분들은 초기 기획 단계부터

"이 UI를 구현하려면 DB 구조를 이렇게 짜야 나중에 확장이 쉽다"

이번 부분까지 확실히 짚어주니까, 나중에 디자인을 엎을 일이 확 줄어들더라고요!


디자이너로서 내 디자인을 좋은 기술로 뒷받침해서 구현하는 경험은 정말 짜릿했답니다 ㅎㅎ.

화면 뒤의 로직까지 꼼꼼하게 챙겨주는 개발사를 만나는 게 이렇게나 중요해요!

그런 의미에서 똑똑한개발자 정말 추천드려요 ㅎㅎ


image.png

토스(Toss)같은 심플한 앱? 쉽지 않아요...


여러분, 이제 대표님이 "토스처럼 심플하게!"를 외치시면

당황하지 말고 이렇게 말씀드려보세요.

대표님, 우리 백엔드 로직도 토스만큼 스마트한가요?

보이는 화면만큼이나 보이지 않는 뒷단의 설계가 탄탄해야,

우리가 꿈꾸는 그 매끄러운 사용자 경험이 완성된다는 사실! 잊지 마세요 ㅎㅎ.

다음에도 더 유익하고 생생한 실무 꿀팁 들고 찾아올게요!


비니였습니다! 안녕~ :)

keyword
작가의 이전글개발 잘한다고?디자인까지 잘하는 웹에이전시 특징 3가지