토스 홈화면 활용법 나만의 금융 관리 시작하기 > 자유게시판

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

지금까지 토스홈화면 학습했던 내용들을 토대로 토스 앱의 홈 화면을 따라 만들어보았습니다. 결론부터 이야기하자면 컴포넌트를 어떻게 만들기 고민하는 데에만 5시간 이상 걸렸고, 컴포넌트를 완성되고 정리가 된 이후에 실질적으로 디자인하는 데에는 몇 분도 걸리지 않았어요. ​​이번 한 주 동안 팀원들과 아티클 스터디를 진행했는데요. 한 주 동안 토스를 파헤쳐 보자는 생각으로 토스에 대한 글만 읽었답니다. 토스가 컴포넌트를 만들 때 하는 고민, 인터랙션을 구현할 때의 수많은 시행착오들, 마지막으로 토스는 왜 자체적으로 서체를 토스홈화면 만들어 사용하게 되었는지에 대한 글을 읽었습니다. 아티클을 읽으며 든 생각은 토스가 정말 디테일에 진심이라는 것! 그리고 토스가 사용자를 대하는 진심이 여기저기 묻어있다는 것을 느꼈어요. ​​아티클을 읽고 나니 토스 앱을 따라 만들어보고 싶더라고요. 그래서 토스 디자이너에 빙의해서 컴포넌트를 만들기 시작했습니다. 먼저 완성본부터 보여드릴게요!​​토스 앱 클론 디자인​V1.0부터 V1.3까지 총 네 번의 큰 업데이트가 있었는데요. 그중 크게 3단계의 변화가 있었습니다. 각 과정에서 제가 어떤 고민을 했는지 말씀드릴게요. ​​​​이해하기 쉽게 토스홈화면 먼저 영상으로 정리해 드리겠습니다! ​1단계: 처음에 만들었던 컴포넌트를 그대로 사용했습니다. 어떤 상황에 쓰일지 상황별로 다르게 만들지 않았어요. 하나의 컴포넌트 내에서 여러 속성을 수정하여 카드를 만들도록 했습니다. 막상 만들고 보니 수정사항이 한눈에 확인되지 않아 불편했어요. 수정이 오래 걸리는 초기 버전2단계: 초기 단계에서 발전시켜 총 세 가지 상태에 쓰이는 형태로 구분하여 의사 상태를 적용하였습니다. 확실히 조금 더 간편해졌어요. 보다 빠른 수정을 위해 개선된 두 번째 버전3단계: 아예 하나의 토스홈화면 카드 세트로 만들어 이 세트만 있으면 모든 디자인을 할 수 있도록 만들었습니다. 하나의 세트로 만들어 아주 간편하게 만든 최종 버전​​조금 더 자세하게 설명해 보겠습니다. ​​​v1.0​우선 첫 번째로 계좌 내역이 표시되는 카드와 이번 달 쓴 금액이 표시되는 카드를 한 컴포넌트로 만들 수 있을 것 같다고 생각했어요.​그리고 아래 사진에 보험 전문가에게 물어보기라고 적혀있는 카드가 있잖아요. 이 카드도 왠지 위와 동일한 하나의 컴포넌트로 만들 수 있을 것 같다고 생각했습니다. 토스홈화면 그래서 우선 컴포넌트의 이름을 Card로 하고 header, account, 그리고 bottom의 세 부분으로 나누어 제작하였습니다. 그리고 만든 컴포넌트를 이용하여 한 번 카드를 만들어보았습니다. 그럴싸하죠?V1.1​하지만 이때 이번 달 쓴 금액 섹션에서 앞선 Card/Account 컴포넌트를 사용할 때 문제가 있었습니다. 컴포넌트명이 account로 되어 있어서 다른 부분에 사용할 때 이름 때문에 헷갈리더라고요. 그래서 이름을 조금 더 직관적으로 body로 수정하였습니다. 그리고 텍스트가 두 줄 있는 것, 한 줄 있는 것, 큰 텍스트가 토스홈화면 한 줄 있는 것을 각각 인스턴스로 만들었어요. 컴포넌트 내에 들어가는 아이콘이나 도형들은 전부 컴포넌트화시킨 후에 swap instance 기능을 부여하였습니다. ​초기 단계 컴포넌트의 3가지 의사 상태​아이콘도 전부 컴포넌트로!​여기까지 진행한 후에 튜터님과 면담을 진행하였는데요. 앞서 만든 세 개의 instance를 보다 더 편리하게 수정하자는 의견이 나왔습니다. 앞서 만든 인스턴스의 경우 모든 개체에 boolean property와 swap instance property를 적용하여 인스턴스 속성 수정을 통해 각기 다른 형식의 카드를 만들도록 했는데요. 막상 토스홈화면 만들어놓고 보니 속성을 이용하여 형태를 변경하는 과정이 생각보다 편리하지 않더라고요. ​​​v1.2​그래서 최종적으로는 인스턴스의 형태를 애초에 사용해야 하는 모습으로 바꾸었습니다. 수정사항을 조금 더 빠르게 적용할 수 있도록 했어요. ​그 후에 tab bar도 만들었습니다. ​홈 화면 가장 위에 표시될 이벤트 화면을 만들었고요. 튜터님의 "컴포넌트를 만든 후에는 컴포넌트를 또 하나의 세트로 묶어 컴포넌트로 만들어라"라는 조언을 토대로 완성될 카드 형식으로 최종적인 컴포넌트를 완성시켰습니다. ​V1.3현재 버전​마지막으로 홈 화면에 들어갈 모든 요소들을 토스홈화면 하나의 set로 컴포넌트화해서 디자인하는데 시간이 많이 들지 않도록 했습니다. 실제로 이렇게 만들어놓고 나니 막상 디자인하는 데에는 1분도 채 걸리지 않았더라고요. 완성된 컴포넌트들을 팀원들에게 설명드렸더니 금방 쉽게 이해가 된다고 칭찬해 주셨습니다 ㅎㅎㅎ​​빠른 작업을 위해 컴포넌트에 적용할 수 있는 속성은 모두 적용했습니다. 그리고 카드 컴포넌트의 경우 상단 헤더나 더 보기 텍스트가 없는 카드도 있기 때문에 세트에서 header와 bottom을 boolean property를 이용해 쉽게 끄고 켤 수 있도록 만들었습니다. ​​​​