[25.03.17] TIL

🗓️ 오늘의 일정

- 개인 과제

---

✏️ 디자인 카타

🔷 컴포넌트의 이해

📢 B3조: 리스트&카드

1. Card

- 정의: 정보를 담는 최소 단위의 컴포넌트

- 기능: 제목, 본문, 이미지, 버튼 등의 콘텐츠를 담아 시각적으로 구분한다.

- 명칭 차이: 보통 card라고 부르나 material에서는 container라고도 부른다

- Do & Don't: 시각적 계층구조는 단순하게. 동선을 예상하여 앞서 불필요한 정보는 자제.

 

2. List

- 정의: 같은 속성의 정보를 정렬해둔 형태의 컴포넌트

- 기능: 사용자가 특정 항목을 찾을 수 있도록 단일 연속 열(이게 베스트)로 구성

- 명칭 차이: 보통 list, listview 등으로 부르나 iOS에서는 단일 열 tableview와 그리드형 collection view로 구분된다 list나 table로 부르는 듯

- Do & Don't: 좌우 여백 없게끔? 사용자에게 의미 있는 구성 방식. 여백 잘 조정할 것~

 

3. 정기식 튜터님 피드백

- 나누기 애매. 개발자와 소통하기 위해 용어를 align해야 한다. 사내 규정에 따름.

- container와 card: container, section, div, module, ul/li 등의 명칭이나 개념(block)은 코딩에서 사용하는 단어이다? 가볍게 알아두면 좋다

- 기준 디바이스, 최소 디바이스: 네이티브 서비스, 하이브리드 서비스 등 제공 방식에 따라 달라진다. 반응형-멀티 디바이스-에 대응해야 하는데, 이런 경우 filp이나 fold는 별도 가이드라인 필요. 사용자의 사용 데이터에 따라 대응하기도. 최소 디바이스는 얼마만큼 과거의 버전을 대비할 것이냐 하는 문제. 

 

📢 A8조: 버튼

1. 정의

- 기능: 터치라는 동작 통해 즉각 명령 시행

- 사용: 선택, 페이지 이동, 다운로드 등 다양한 액션

- 주의 사항: 가시성, 클릭 가능성 등

 

2. Do & Don't

- FAB: 중요한 액션 버튼. 직관적인 아이콘을 사용. 화면 당 권장 개수 1개. 아이콘만 봐도 이해할 수 있어야 하지만 라벨을 추가할 수도 있다.

- Filled Button: FAB 다음 우선순위. 큰 흐름의 마지막에 사용. outlined와 같이 사용하여 시각적 위계 형성. docked button으로 만들 경우 오른쪽에 filled를 넣고 왼쪽에 outlined를 넣는 게 사용자 학습모델에 적합한 방법. 이것도 화면 당 1개 내외로 사용하는 것이 좋은 것 같다?

- Text Button: 일반 텍스트와 구별되어야 한다. 색상, arrow 아이콘 등을 활용

- Icon Button: 직관적이어야 함. 필요 시 라벨 추가. 터치 포인트 지킬 것! (Material: 48*48px/HIG: 44*44px)

- Outlined Button: 중간 강조. 터치 포인트 지킬 것!

 

3. 정기식 튜터님 피드백

- Filled Button CU 사례: 왜 장바구니에 primary color를 넣었는지? 왜 장바구니를 CTA로 삼았는지?

- Icon Button 바늘 이야기 사례: 템플릿 기본 제공 레이아웃을 고려할 것

- 형태론, 의미: 형태론적인 접근일 경우 아이콘 버튼 필 버튼... 의미론적인 접근일 경우 프라이머리 버튼 세컨더리 버튼...

- 산업 형태에 따른 접근: 이러한 접근은 산업 형태에 따라 다르게 적용된다. 예를 들어 B2B 플랫폼인데 의미론적으로 접근한 경우 브랜드의 프라이머리 컬러를 고려해야 해서 복잡해진다. B2C 플랫폼인 경우 의미론적으로 접근 가능할 것이다.

 

📢 정기식 튜터님: 디자인 라이브러리

- 디자인 시스템은 훨씬 더 방대하다... 모든 규칙이 있어야 한다.

- 디자인 라이브러리: 컴포넌트, 텍스트 스타일, 컬러 시스템, 그리드 등. material, HIG 비롯한 다양한 회사의 디자인 시스템을 뜯어보며 공부할 것

- 컬러: 프라이머리-세컨더리-뉴트럴, 시스템 컬러 <- 의미론적 분류

- 텍스트: 웹/앱에 따라 폰트의 대체적인 크기가 달라진다. 보통 웹이 더 크다. 되도록 12 이하는 사용하지 말 것...

- em과 rem: 개발에서... 사용하는 단위?

---

✏️ UT

📢 필수 과제

---

🗒️ TIL

✨어깨 결려~~~~