[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

BELATED ARTICLES

more