[TIL] 0808

 

1. 오늘 학습 키워드

• ch2: 정보 구조화, 클러스터링, 시각적 흐름, 플로우 차트
• ch3: 컴포넌트, 네이밍, 배리언츠, 프로퍼티
• ch4: 프로토타입

 

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

 

클러스터링 Clustering

• 정보에도 친한 정도가 존재(중복/인접/상하 관계)
• 클러스터링
  • 게슈탈트 원리의 근접성의 원리와 유사함
  • 정보를 구조화하는 것 ▶️ 가까운 관계끼리 묶어서 덩어리를 만들고, 또 더 큰 덩어리를 만드는 것
  • 이런 덩어리 짓기를 정보 클러스터링, 콘텐츠 블록화 라고 부름
  • 💡 클러스터링이 중요한 이유
    • 시선의 자연스러운 이동을 만든다
    • 더 쉽게 읽히게 한다
    • 요소들을 정리정돈하면서 여백, 간격, 비례 등을 연습할 수 있다

• 정보 클러스터링
  
  • 카드는 크게 3개의 덩어리로 나눌 수 있음
    • 각 영역의 세부 영역(이미지, 제목과 설명 영역, 버튼 영역)
    • 하나의 정보 그룹 단위는 명확하게 시각적으로 분리해야 함

 

 

디자인 시스템 운용 전략

• 모든 컴포넌트를 구조화할 필요는 없음
  • 재사용이 불가능한 일회성 화면이나 이벤트성 배너는 굳이 컴포넌트로 만들지 않아도 됨
  • 재사용 가능성이 높은 요소부터 차근차근 구조화하는 것이 핵심
  • 어떻게 판단하는지?
    • 3번 이상 반복되는 요소인지
    • 콘텐츠가 바뀌어도 컴포넌트의 구조가 유지되는지
• 배리언트로 굳이 만들지 않아도 기본적인 UI는 갖출 수 있음
  • 처음부터 완성된 시스템을 가져가려고 하면 안됨 ▶️ 제품 방향이나 사용자가 우리 서비스를 쓰는 이유 등 더 중요한 논의에 힘을 써야 함
  • 프레임에 적당한 이름을 붙이고, 한 곳에 잘 정돈해서 모아두는 것만으로도 충분한 구조가 가능함
• 의도와 맥락을 이름에 담기
  • 컴포넌트에 적당한 이름을 잘 붙이는 것만으로도 충분한 정보를 담을 수 있음
  • 배리언츠로 복잡하게 만들지 않아도 네이밍 구조만으로도 유사한 구조와 맥락을 파악할 수 있음
  • 작은 조직, 초기 서비스, 혹은 혼자 일하는 디자이너에게 중요한 것 ▶️ 정교한 디자인 시스템이 아니라, 의도가 정리된 최소 요소들

 

컴포넌트 관리 참고 사항

• 지금 내가 만든 이 컴포넌트는 3개월 뒤에도 사용 가능한 구조인지?
• 반복되는데 컴포넌트화하지 않은 요소가 있진 않는지?
• 구조를 보면 누가 봐도 어떤 기능인지 이해할 수 있는지?
• 이름만 봐도 역할을 유추할 수 있는지?

북극성 지표와 프로토타입

• 북극성 지표는 우리 제품이 성공시켜야 하는 가장 중요한 사용자 행동 혹은 수치를 의미
• 그 지표를 높이려면? ▶️ 사용자의 행동을 설계하고, 적합한 UI로 화면을 설계해야 함
• 마지막으로 그 행동이 실제로 자연스럽게 연결되는지를 흐름으로 확인해야 함
• 프로토타입은 그 흐름을 확인하게 해주는 효과적인 방법 중 하나

 

 

오늘 수강한 강의 정리🔽

[실전 UI 디자인] CH2: 정보 구조와 시각 흐름을 통한 UI 설계

[실전 UI 디자인] CH3: 컴포넌트 설계의 목적

 

오늘 진행한 디자인 카타 정리🔽

[디자인 카타] PC에서 상세 정보 보기, 어떤 방식이 다량의 정보를 탐색할 때 편한가요?

 

 

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

 

- 새롭게 알게 된 점 & 느낀점

• • 정보 구성 원칙
    • 한 번에 3~5개의 정보 덩어리로 나누는 것이 이상적
    • 동일한 정보끼리는 가깝게, 다른 정보끼리는 멀리 배치 → 덩어리(그룹) 인식 강화
    • 여백은 4px 또는 8px 단위의 그리드 시스템으로 맞춰 시각적 통일성 유지
  • 화면 설계 시 질문하기
    • “이 기능·정보가 지금 꼭 필요한가?”
    • “사용자가 이 화면에서 무엇을 하려는지 내가 정확히 이해하고 있는가?”
  • 플로우 차트 설계 전 점검
    • 사용자의 목적은 무엇인가?
    • 목적 달성을 위해 필요한 단계는 무엇인가?
    • 그중 가장 최소한의 행동은 무엇인가?
  • 디자인 기본 요소
    • 서체: 제목, 본문, 캡션(or 작은 본문) 정도로 단순화
    • 색상: 기본 흑백 + 그레이(텍스트·레이아웃용) + 포인트 컬러만 사용해도 충분

 

4. 내일 학습 할 것은 무엇인지

• 강의_챕터 4 진짜 조금 남음.,...
• 개인과제(3) 조금씩 작성해보기