내일배움캠프

[내일배움캠프] Day 23 - 컴포넌트 범위

이응이응시옷 2025. 2. 24. 17:03
728x90

 

[수업 목표]

  • UI 디자인을 분석하여 반복되는 요소를 찾을 수 있다.
  • 컴포넌트 범위를 이해하고 설계할 수 있다.
  • 스타일을 적용하여 컴포넌트를 정의할 수 있다.

 

🔄 반복되는 UI 디자인 분석

 

🔍 공통 UI 요소 찾아보기

  • 기본 요소(Item) : 칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등
  • 조합 요소(Module) : 카드(이미지+텍스트), 서치바(아이콘+입력 필드), Snackbar(텍스트+버튼)
  • 섹션(Section) : 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트

 

💡 개발자 모드에서 분석하기

  • 안드로이드 개발자 모드
    • 설정 → 휴대전화 정보 → 소프트웨어 정보 → 빌드 정보 7번 클릭 → PIN 입력
    • 설정 → 개발자 옵션 → 레이아웃 범위 표시
  • 웹 개발자 모드
    • 맥 : ⌥ Option + ⌘command + i
    • 윈도우 : F12

 

🛠️ 실습: 실 서비스 UI 뜯어보기

  1. 넷플릭스 UI 분석
    • 화면을 캡처한 후 네비게이션 기준으로 그룹화
    • 반복되는 UI 요소 찾기
  2. 반복되는 UI 요소 분석
    • 섹션(큰 영역) → 모듈(작은 영역) 순으로 분석
  3. 컴포넌트 구성
    • 엘리먼트 → 컴포넌트 → 합성 컴포넌트 → 페이지 순으로 구성
  4. 컴포넌트 네이밍 규칙
    • 영문 네이밍 사용
    • 사용 맥락에 따른 네이밍 (level, type, direction, size 등)
    • Assets 패널 활용으로 라이브러리 관리

 

⚙️ 실습: 네비게이션 바 컴포넌트 만들기

  1. 아이콘 파일 다운로드 후 Figma에 업로드
  2. 아이콘 + 라벨을 묶어 기본 요소(item) 생성
  3. 상태에 따른 Variants 생성 (selected: true/false)
  4. 오토레이아웃 적용 후 navigation bar 컴포넌트 완성
  5. swap instance, nested instances 적용으로 유연성 확보
  6. Indicator 추가하여 완성

 

🃏 실습: 카드 컴포넌트 만들기

  1. 카드 형태 분석 (가로/세로 직사각형, 정사각형)
  2. Variants 생성 (layout: horizontal/vertical/square, size: small/medium/large)
  3. 랭킹 카드 제작 (숫자 요소 추가, 반응형 적용)

 

🎠 실습: 캐러셀 컴포넌트 만들기

  1. 카드 인스턴스 불러오기
  2. 오토레이아웃으로 감싸기
  3. 375px width 설정 + Clip content 적용
  4. 디바이스 사이즈에 맞게 조절

 

💡 Tip
  • 큰 영역 → 작은 영역 순으로 분석
  • 컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업
  • 네이밍 규칙과 자산 관리를 통해 팀 간 협업 효율성 극대화

 

 

[과제] 실 서비스에 사용된 카드 컴포넌트를 만들어 주세요.

[마무리]

 

큰일이다.

클론 디자인에 시간을 너무 많이 쓰고 있다

나만 이러는건지 남들도 이러는건지 뭔가 잘못돼도 단단히 잘못된 느낌이 든다

이렇게까지 클론디자인에 시간이 많이 들면 나머지는 언제 어떻게 해

 

물론 내 집중력 문제도 있겠지만 그래도 하나를 붙잡고 너무 오래하는 것 같은 느낌이 든다

뭔가 해결 방법을 찾아야될 것 같다

728x90