서론
8일차인 오늘은 'Sendbird iOS' 자료의 Component를 바탕으로 UI Design을 진행하고 이 자료를 바탕으로 Prototyping을 적용해보았다. 끝으로 'Coupang'의 화면 한 부분을 선택해 기능들을 하나씩 뜯어보며 분석해보는 시간을 가졌다.
'Sendbird iOS'를 활용해 UI Design하기
이때까지 배워왔던 Component 기능을 활용해 UI Design을 해보았다.
이번에는 'Sendbird iOS'의 Component를 활용해보았다.
'Sendbird iOS'
Component 내의 iCon을 변경하고 싶다면
1. Component 내 iCon 선택
2. 우측 Panel에서 Component 파일 내 iCon으로 변경 가능
점점 Component 기능에 익숙해져 가는 기분이다! 옵션 변경이나 Auto Layout를 자주 활용하니까 초반보다 이해도가 높아진 게 느껴진다!
'Sendbird iOS'를 활용해 Prototyping하기
UI Design이 다 되었으면 Prototyping을 통해 Interaction이 가능하게 해주어야 한다! 현재 화면에서 어떤 화면으로 전환되어야하는지 정확하게 알고 있어야 하기 때문에 'Sendbird iOS_Demos'에서 화면전환 예시들을 보고 Prototyping을 진행했다.
'Sendbird iOS_Demos'
처음으로 'While Pressing'이라는 Prototype 옵션을 사용해봤는데 초반에는 해맸지만 세부옵션에서 '+' 버튼을 누르고 Interaction 화면 추가를 해주니 해결이 되었다!
개인적으로 내가 가장 재미있어하고 흥미있어 하는 부분이다.
아직 완벽하게 내가 원하는 방향대로 옵션을 적용하는 법을 모르지만 아직 할 수 있는 옵션들이 많다는 게 더 재미있게 느껴진다.
분석해보기
마지막으로 'Coupang' 앱의 한 부분을 고르고 기능들을 뜯어가며 분석을 했다.
총 3일간 진행을 하게 될 과제인데 오늘은 화면의 UI가 어떻게 구성되어 있고 항목은 어떤식으로 분류가 되어있는지에 대해 알아보았다.
▼ 아래는 내가 선택한 'Coupang'의 'My Page' 화면구성 분석을 'Figma'로 작성한 내용이다.
<'Coupang' My Page 화면구성 분석>
내일은 각 영역별로 수치와 금액들을 어떻게 노출하는지, 어떤 상황일 때(금액이 많거나 적을 때 또는 컨텐츠 양이 적거나 많을 때) 어떻게 UI를 제공하는지를 포함해서 세세하게 화면을 설계해보는 과정을 하게 된다.
기본적인 UI 구성에 대한 개념과 Component를 활용한 제작을 반복해서 작업하다보니 확실하게 기억에 남고 자리를 잡아가는 것 같다. 내일 화면 설계가 끝나면 마지막으로 UI를 Clone Design 해볼 것 같은데 개인적으로 이 과정이 가장 기대된다!!
