[TIL] 25.07.24

아노말로카리스는 화석으로 자신의 존재를 증명했다.

오늘 학습 키워드

• 컴포넌트
• 클론 디자인

오늘 학습 한 내용을 나만의 언어로 정리하기

• https://janguiux.tistory.com/65

[ch4] 일관된 디자인을 위한 컴포넌트

• UI 클론 디자인 : 잘 만들어진 제품의 디자인을 모방하여 전반적인 UI 구조를 파악 및 학습하는 과정.
  
  이번에는 카드, 캐러셀, 네비게이션 바 같은 다양한 UI 컴포넌트 클론 디자인을 연습해보았다.
  
  컴포넌트를 블록처럼 설계하면 확장성과 유지 보수가 용이하다.
  ▶ 재사용성 : 같은 컴포넌트를 여러 곳에 활용할 수 있다.
  ▶ 유지 보수 용이 : 한번의 수정으로 전체 UI에 반영할 수 있다.
  ▶ 유연성 : 추가, 삭제하거나 혹은 위치를 변경할 때, 레이아웃에 큰 변화 없이 유연하게 적용할 수 있다.

• 필터 칩 : ▽아이콘이 있는 경우와 없는 경우f와 선택 한 경우(배경색 있음), 선택하지 않음(배경생 없음)으로 각각 2가지를 생성.  
  1) 텍스트 레이어를 만들어 작성하고 ▽아이콘을 호출하여 오토레이아웃으로 감싸고 스타일을 적용한다.
  2) 프레임을 복제해서 디자인을 수정하여 나머지 3가지 바리에이션을 생성한다.
  3) 생성된 4개의 프레임을 선택하고 각각 컴포넌트로 만든 다음, 묶어서 컴포넌트를 생성한다.
  4) 배경색이 있으면 true, 없으면 false 값 하나랑 아이콘 유무를 표시하는 프로퍼티를 하나씩 추가하고 적용한다. 

• 액션 : 위의 필터 칩에서 ▽아이콘 대신 관련된 콘텐츠에 따라 앞의 아이콘이 변경되는 형식을 적용한다.
  1) Instance swap 프로퍼티를 추가해서, icon 프로퍼티를 생성하고, value로 사용할 아이콘을 가져온 다음 적용한다.

• 섹션 : 위에서 만든 필터 칩을 3개 이상 연결하여 true,false 값에 따라 모양이 바뀌도록 나열한다.

• 섹션 타이틀 : 섹션에 추가로 타이틀을 적용.

• 검색 바 : 필터 칩 내부 텍스트 부분 대신 검색 부분으로 쓸 필터칩을 넣어서 완성. 물론 검색바에 맞게 기존의 스타일을 변형했다.
  
  

 

• 홈화면 UI : iPhone 13 mini 프레임을 가져와서 Assets를 통해 지금까지 만든 컴포넌트를 가져와 테트리스처럼 층층이 위에서 아래로 쌓아서 홈 화면을 만든다.

학습하며 겪었던 문제점 & 에러

• 5강 클론 디자인이 생각보다 길었고, 이전 강의 들에서 학습한 요소들을 못 찾아서 다시 새로 만드는 등 비효율 요소가 너무 많았다.

내일 학습 할 것은 무엇인지

• UI 분석 및 오늘 만들지 못한 클론 디자인