[TIL] 0724
2025. 7. 24. 21:18
1. 오늘 학습 키워드
- 클론 디자인
- 화면 구조
2. 오늘 학습한 내용을 나만의 언어로 정리하기
컴포넌트를 블록처럼 설계하면 좋은점
- 재사용성: 같은 컴포넌트를 여러 곳에 활용 가능
- 유지 보수 용이: 한 번의 수정으로 전체 UI에 반영 가능
- 유연성: 추가, 삭제, 위치 변경 할 때, 레이아웃에 큰 변화없이 유연하게 적용 가능
오늘 정리한 내용 🔽
[UI 디자인의 모든 것] Ch5: UI 클론 디자인
UI 클론 디자인📌 잘 만들어진 제품의 디자인을 모방하여 학습하는 과정!디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법 등을 익힐 수 있음전반적인 UI 구조 파악좋은 연습 방법인기
azure326.tistory.com
실습🔽
[UI 디자인의 모든 것] Ch4: 컴포넌트 만들기
버튼 컴포넌트버튼 컴포넌트(light, dark/filled, text icon)아이콘 버튼 컴포넌트(filled, standard) 카드 컴포넌트 vertical 컴포넌트(number/size/style/number2) horizontal 컴포넌트(size)item/card item 컴포넌트(size, layout)
azure326.tistory.com
[UI 디자인의 모든 것] Ch5: 홈/목록/상세 화면
칩 컴포넌트필터 칩 컴포넌트(selected, configuration, label)액션 칩 컴포넌트(selected, icon, label) 필터 칩/액션 칩 컴포넌트 사용해서 section 만들기(section/filter_chip, section/action_chip) 섹션 타이틀 컴포넌트
azure326.tistory.com
3. 학습하며 겪었던 문제점 & 에러
- 새롭게 알게 된 점 & 느낀점
- 아이콘과 텍스트를 함께 배치할 때 아이콘 자체의 여백과 오토레이아웃의 패딩이 겹쳐 오른쪽에 아이콘이 있을 경우, 오른쪽 여백이 더 넓어 보일 수 있음 ▶️ 실제 간격과 무관하게 시각적으로 치우쳐 보일 수 있기 때문에 시각적 보정이 필요하다!
- 칩 컴포넌트의 캐러셀 적용 시 마진 설정 ▶️ 칩이 여러 개라 좌우 스크롤 되는 구조라면 양쪽 마진을 동일하게 적용한다? 여백이 과해질 수 있음 그래서 왼쪽에만 마진 16정도를 적용하고 나머지 칩은 간격만 주는 방식이 더 자연스러움
4. 내일 학습 할 것은 무엇인지
- 개인 과제
'UXUI > TIL' 카테고리의 다른 글
[TIL] 0728 (2) | 2025.07.28 |
---|---|
[TIL] 0725 (2) | 2025.07.25 |
[TIL] 0723 (1) | 2025.07.23 |
[TIL] 0722 (1) | 2025.07.22 |
[TIL] 0721 (0) | 2025.07.21 |