toss 어플을 따라해보자
TDS(toss Design System) 에 취해버렸다!
들어가면서... 오늘의 주저리,
이 숙제는 사실 설 연휴 동안 진행한 것이었다.
첫날(고향에 내려가던 날)에는 괜히 의욕만 앞서 하루 만에 이 숙제를 끝낼 거라고 호엄장담을 하였지만, 사실 이 숙제를 완성하는데 일주일이 걸렸다.
첫 시도여서 그럴수도 있고, 작업 하는 과정에서 소소한 실수들도 있었고... 반년만에 내려온 고향에서만은 정말 쉬고 싶은 마음이 가득했다. 평소에도 가득 쉬었지만...? 이때는 모 회사의 채용도 진행 중이었기 때문에 더 마음이 들떠있기도 했었다. 일주일 동안 미루며 진행한 숙제는 끝내 멘토님의 화를 불렀고 한참 동안 혼나고 말았다. 그리고 그 채용도 물거품이 되어버렸다.
NO.1 디자인 공부_ toss어플 따라 하기.
토스 어플을 처음으로 시작한 이유는 2019년 유명 디자인 커뮤니티 '디자인스펙트럼'에서 주최한 '2019 스펙트럼 콘'의 toss의 디자이너 섹션에서 선보인 TDS(Toss Design System)을 보고 나서였다. toss는 효율적인 디자이너의 디자인 시스템 너무나도 완벽하게 시스템화 되어있었기 때문이다.
TDS 존재로 30-40분 걸릴 화면 디자인이 3-4분에 끝나며, 코드 길이는 50%로 줄었다.
절약한 시간을 따지자면 1인당 1시간, 1인당 6개월 동안은 125시간, 토스 메이커가 6개월 동안 절약한 시간을 총 계산하면 1000시간이 아닌 4500시간(=562일)이라고 한다.
- 출처 - toss design system 관람후기 -
개발자와 효율적인 의사소통을 위해 toss디자이너들이 화면을 어떻게 구성해보았을까?
이러한 이유들로 이번 첫 번째 따라 하기에서는 이 디자인 시스템화를 조금이나마 배워보고자 toss어플, 따라 하기를 시작해보았다.
첫번째 시도. 화면캡쳐의 오차로 금액과 날짜가 조금 다르다.먼저, 집중하면서 따라 하다 보니 떨어진 탈락 메일을 비롯한 흔히 취준생들이 느끼는 부정적인 생각이 나지 않았다. 화면을 그리다 보니 신기하게도 화면들의 컴포넌트(구성요소 및 아이콘 묶임들)가 보이기 시작했다. toss의 다른 화면들을 보며 '아! 이 위치에 이 컴포넌트가 이렇게 변형되어 사용되었구나!'를 느끼다 보니 새삼 toss의 디자인 시스템의 고민들과 섬세한 구조화까지 너무 대단하게 보였다.
스스로 구성해본 TDS (오탈자 못 본것으로 해주세요...)이렇게 놀라움을 느낀 것도 잠시. 큰 문제가 생겼다.
나의 폰이 iPhone 11이었다.
이것이 무엇이 문제 일까?
보통 앱디자인시 많이 사용 되는 프로그램 '스케치'의 화면스케치에서 제공하는 해상도는 이렇게 다양하다. 그리고 기본적인 앱 디자인 시 Apple에서 제공되는 디자인 심볼라이브러리를 사용하게 되는데, 이 심볼들은 기본적으로 iPhone 11 pro (iPhone Xs, iPhone X와 동일하다고 생각하면 된다.)에 맞춰져 있다. 즉, 흔히 보이는 앱 디자인의 기본적인 해상도는 iPhone 11 pro인 것이다.
iPhone 11 pro와 iPhone 11의 화면차이
iPhone 11을 iPhone 11 pro사이즈로 줄여 오버레이 할 경우나는 이것을 고려하지 않고 iPhone11 pro의 Screen Artboard에 iPhone11 화면을 보고 그리고 있었으니, 너무나도 다를 수밖에... 너무나도 초보자 같은 실수라... 스스로에게 부끄러웠다. 그 더불어 11과 pro의 경우 그저 앱 화면의 공간만 줄어들고 커진다고 생각해왔었는데, 공간은 물론 폰트 사이즈에 버튼 크기까지 변경된다는 사실도 알게 되었다. ( 당연한 사실일지 모르나 나는 처음 아는 사실이었다! )
나의 산지 몇 달 되지 않은 폰을 동생의 폰(iPhone Xs)과 바꾸는 출혈을 겪은 뒤 다시 디자인을 시작했고, 이 전의 앱 화면 디자인의 시도가 도움이 되었는지 실제 해상도의 폰으로 디자인해서 그런지 앱의 싱크롤률이 많이 상승하였다.
원본화면과 따라하기 화면의 오버레이 화면 비교결론
나는 평소 디자인을 할 때 앱 간의 간격을 최대한 8 배수에만 맞추려 하였다. 4배 수도 충분한데, 왜인지 집착하던 습관이었다. 이것이 잘 못 된 것이었다. 실제 앱 화면을 그려 본 결과 4 배수 가끔은 2 배수에 맞출 수도 있다는 것을 배웠다. 이번 따라 하기 한 번으로 고정관념을 깨다니! 우물 안에서 나온 듯 한 기분이 들었다.
<<탁월한 사유의 시선>>의 책을 보면, (...)'따라 하기'를 해야 결국에는 따라잡을 수 있게 되고, 두터운 훈고가 있어야 비로소 창의도 나올 수 있다.(...)라고 말한다. 작가님이 여기서 말한 것은 너무 '따라 하기'에만 집중하다 보면, 그것을 당연하게 여기고, 앞서려 덤비거나 창의를 발휘하려는 의지 자체도 줄어든다고 하였다. 인풋이 있다면 아웃풋도 있어야 한다는 뜻으로 간단히 해석해보았다.
이러한 따라 하기를 지속적으로 해내다 어느 순간엔 창의를 발휘하려 노력할 수 있는 날이 오 길 빌 어보며, 오늘의 첫 번째 따라 하기도 이렇게 마무리를 지어보고자 한다.
다음에는 이커머스계의 탑3중 하나인 '쿠팡'를 참고하여 분석해보며 작업해보고자 한다.
또한 스터디에서 진행할 도널드 노먼의 책 후기와 대화들을 공유할 것이다.
