[본캠프] d+17.

박예지·2025년 2월 14일

[UIUX] TIL 📑

목록 보기
29/100

홀쨕

📌
1. 식료품 앱 탐방
2. UI 키트 만들기
3. 화면 하나 시작하기
4. 선배와의 대화

1. 식료품 앱 탐방

팀원 분의 추천을 받아 이마트몰까지 포함하여 쿠팡, 컬리, 팔도감 어플의 화면을 둘러보았다.
비슷하면서도 다른 점이 많았고 특히 텍스트를 왼쪽 정렬한 것이 모두 동일하다는 것을 깨달았다.
왼쪽에서 오른쪽 방향으로 글을 읽기 때문에 모든 텍스트를 왼쪽 정렬한 것이라고 생각했고 이 점을 염두해두고 디자인을 시작했다.

2. UI 키트

오랜만에 색상과 폰트 스타일을 만들어보았다.
사실 하다가 기억이 안 나는 부분이 있어서 사전캠프때 강의를 들으며 썼던 TIL을 보며 만들었다.
이래서 TIL 작성이 중요한가보다!

폰트 스타일을 너무 많이 저장했나 싶지만 일단 잘 사용하고 있다.

3. 화면 하나 시작하기


'시작하기' 였지만 일단 목록 화면을 완성했다.
다른 화면들도 만들어보고 분위기가 맞는지 보며 수정해야할 것 같다.

가로 스크롤과 세로 스크롤이 필요한 상황인데 이 프레임에서 오버 플로우를 수평으로 설정하니 세로 스크롤이 작동하지 않았다.
그래서 가로 스크롤이 필요한 프레임을 오토레이아웃으로 한 번 더 감싸 화면 너비로 적용하고 그 프레임에 오버 플로우를 수평으로 설정하였더니 그 부분만 가로 스크롤이 작동하였다.

배리언츠 숫자 적용

애플이나 구글에서 만든 UI 키트를 사용할 때 갯수로 탭 수를 지정할 수 있는 컴포넌트들이 많았다.

그래서 궁금했었는데

(출처 : Wireframe kit by Patric Melis)

이렇게 탭 하나를 만들어놓고 가져와서 붙인 다음
베리언츠를 추가하여 값을 숫자로 하면 숫자로 적용할 수 있다!

4. 선배와의 대화

캠프를 참여하면서 튜터링이나 팀 프로젝트 등 궁금했던 부분을 해결할 수 있었다.
나도 이 기간을 밀도있게 보내야겠다 다시 한 번 다짐하게 되었다.

실천할 것 🍊

  1. 주 1회 아티클 읽고 정리
  2. UIUX 관련 서적 읽고 정리
  3. 이번 개인과제 끝나고 튜터링
profile
Life is pain au chocolat 🍞

0개의 댓글