[OZ코딩스쿨] Part 2 UI 디자인 실무_회고 (2)

[DAY16]

• Main Component → 수정사항 반영 → Instance
  • Property : 메인 컴포넌트에 추가 속성 부여하는 기능, 컴포넌트 옵션 추가
  • 프로퍼티 옵션 적용 → Main / 프로퍼티 옵션 확인 → Instance
• Variants : 하나의 컴포넌트를 여러 상태로 묶어서 관리하는 기능 = 컴포넌트 세트, 타입 추가
• 프로퍼티 Property : 카테고리를 구분해주는 기준 값 = 카테고리명
• 벨류 Value : 카테고리에 속한 요소들 고유 = 각자의 이름, 구분값

---

[DAY17]

• Variants : 하나의 컴포넌트를 여러 상태로 묶어서 관리하는 기능 = 컴포넌트 세트, 타입 추가
• Elevation 고도 : UI에서 요소들이 서로 다른 시각적 레벨에 위치하도록 깊이감과 계층 구조 부여

---

[DAY18]

• Slot 슬롯 = 객체를 넣을 수 있는 빈 주머니 (인스턴스 보관함)
  • 인스턴스를 분리하지 않고도 메뉴 옵션, 버튼, 아이콘까지 추가해 동적 컴포넌트 인스턴스 제작 가능
  • AS IS
    • 인스턴스는 메인 컴포넌트에 없는 기능을 추가할 수 없음
    • 메인 컴포넌트에 조합이 없는 경우 인스턴스 디테치 후 새로운 컴포넌트 생성
    • 새로운 컴포넌트 생성으로 인해 디자인 라이브러리에 점점 관리할 자료가 많아짐
  • TO BE
    • 실시간 변동 등 업데이트 반영: 디테치가 아니므로 컴포넌트 업데이트 반영
    • 자유형 레이아웃: 카드나 모달 등 다양한 레이아웃 변경, 추가, 실험 가능
    • 간소화 및 깔끔한 라이브러리: 경우의 수가 확실하게 줄어듬
  • 사용 사례
    • 반복 요소 추가
    • 모듈 교체 - 헤드라인은 비슷하고 내용만 바뀔 때
    • 이미지 교체

---

[DAY19]

• Dark Mode의 필요성
  • 눈의 피로 감소 - 구매, 클릭, 전환 유도
  • OLED 디스플레이 효율 증가 - 검은 픽셀은 전력을 거의 사용하지 않아 배터리 절약 가능
  • 취향과 환경에 맞춤 사용 - 사용자가 원하는 테마를 직접 선택 가능
  • 디자인 시스템 확장(테마 기반 설계 가능) - 시멘틱 컬러와 베리어블 활용에 적합

---

[DAY20]

• Google Sheets Sync 플러그인 활용 방법
  • 수료증 내부에서 변경되어야 할 항목(예: 이름, 일련번호 등)의 텍스트 값을 #name #category 와 같이 앞에 #을 붙여 표시
  • 좌측의 Figma 레이어 이름 또한 동일하게 #name #category 설정되어있어야 Google 시트의 값이 변경되었을 때 자동 반영
  • 제작할 개수 만큼 새로운 페이지에 복제
  • 이 플러그인은 디자인 요소를 새로 생성하지 않고, 기존 프레임 내 텍스트만 변경해주기 때문에 필요한 갯수만큼의 템플릿 복제해두어야 함 + 편의상 왼쪽 레이어 cmd + R 활용해 바꿔줌
  • 템플릿에 입력한 변수명 #name #category 과 정확히 동일한 열 제목을 사용해 스프레드시트 생성
  • 시트-페이지 이렇게 실행되기에 하나의 페이지 = 하나의 시트
  • 열 제목은 반드시 Figma 수료증 텍스트(마커)와 공백, 띄어쓰기 없이 완전히 일치해야 제대로 매핑됨
  • 생성한 시트의 공유 권한 설정
  • Figma에서 플로그인 실행 후, Open Google Sheets Sync 버튼 클릭
  • 앞서 만든 시트의 링크 붙여놓고, Fetch & Sync 버튼 눌러 데이터 불러오고 자동으로 텍스트 반영
    • 만약 데이터 먼저 확인하고 싶다면 Fetch만 클릭하여 미리보기한 뒤, 이상 없을 경우 Sync 버튼 눌러 실제 디자인에 반영할 수 있음
  • 시트와 연결한 후, 데이터가 변경되었을 경우 Re-sync 버튼 클릭하면 Figma 템플릿의 내용이 시트 기준으로 최신화됨
  • 시트 안의 데이터를 수정한 뒤 Re-sync를 누르면 연결된 텍스트 레이어들이 자동으로 갱신됨
    • ‼️ Re-sync를 하면 기존에 입력된 내용은 덮여지고, 해당 이름 가진 레이어는 모두 시트 값으로 변경됨. 중요한 내용을 덮어쓰지 않도록 확인.

---

[DAY21] 피그마 마지막 날

• Design System - 일괄된 사용자 경험을 위한 기반
  1. 체계적인 구성
  2. 재사용 가능성
  3. 명확한 소통
  4. 확장 가능한 구조
  • Raw Value
  • → Primitive → Sementic
    • 구성하는 2가지 : Foundation & Component
      • Foundation = Style (color, typography, radius, icon, spacing, elevation)
  • → Component (위로 갈수록 구체적인 역할로 정의)
    • Main component & Instance
      • ‼️ 항상 원본을 수정해야 자식요소도 일괄 변경된다는 사실
    • Component Property
    • Nested Instance
  • 설계 프로세스 : 아이콘 > 모듈 > 템플릿 > 페이지
  • 프로젝트 프로세스 :
    1. 파운데이션 세팅 - 컬러 팔레트 뽑고 베리어블에 필요한 단계만 넣기
    2. wireframe (Lo-Fi → Mid-Fi → Hi-Fi)
    3. 핵심 컴포넌트 제작 (아이콘 > 모듈 > 템플릿 > 페이지) - 반복적으로 사용하는 UI는 초반에 컴포넌트로 제작
    4. UT 진행 - 피드백 바탕으로 수정
  • 바이브 코딩 Vibe coding - 구현하고 싶은 동작을 간단명료하게 설명하면 AI가 알아서 코드 생성
  • 피그마 Make 기획서 작성 예시 - 구체적이고 명확하게 작성할 때 의도한대로 나올 확률 높음
    • Task : 무엇을 만들 것인가?
    • Context : 누구를 위해, 왜 만드는가?
    • Elements : 반드시 포함할 요소는?
    • Behavior : 어떻게 작동, 배치하는지?
    • Constraints : 어떤 규칙을 지켜야 하는가?