📅 2026.05.11(월) - 18일차

UI/UX 디자이너를 위한 React!

React: 화면을 컴포넌트라는 레고 블록으로 나누고, 데이터(상태)가 바뀌면 화면을 자동으로 다시 그려주는 JavaScript UI 라이브러리. Figma의 컴포넌트 시스템과 코드를 1:1로 매칭하여 설계 -> 디자인과 개발의 싱크.
페이지 중심에서 상태 중심. 컴포넌트 기반 설계.
코딩을 많이 안하더라도 알아두면 좋은 내용: 느낌표를 앞에 놓고 변수를 넣으면, 그 변 수를 뒤집는다는 뜻임
jQuery처럼 요소를 직접 조작하는 대신, 상태를 선언하고 규칙을 정해두면 시스템이 알아서 화면을 바꾸는 선언적 UI 설계.
기술 이해의 힘: 컴포넌트와 상태를 이해한 디자이너는 개발자와 동일한 언어로 대화할 수 있음

1. React 핵심 개념

개념	비유	설명
Component	레고 블록	UI를 이루는 재사용 가능한 조각 (Figma Component)
Props	설명서/속성	부모가 자식에게 전달하는 값 (Component Property)
State	상황판/현재 상태	컴포넌트 내부에서 변하는 현재 값 (Variant)
JSX	디지털 설계도	JS 안에서 UI를 설명하는 문법 (HTML + JS)

2. 왜 React?

웹이 단순한 '문서'에서 복잡한 '앱'으로 진화하면서 상태 관리가 핵심이 됨.

jQuery(직접 조작): "버튼을 클릭하면, 숫자를 찾아 1로 바꿔라." ➜ 복잡해지면 꼬임.
React(상태 선언): "좋아요 상태가 true면 활성 버튼을 보여줘라." ➜ 시스템이 자동 관리. 복잡한 UI 상태 관리.
디자이너의가 React 이해해야하는 이유: "로그인 페이지" 디자인에서 "로그인 컴포넌트의 각 상태(Loading, Success, Error)" 표시

* 모바일과 웹의 가장 큰 차이: Hover가 없다!

3. 디자이너가 반드시 고려해야 할 UI 상태

도구	역할	디자이너 관점 (가치)
Vite	프로젝트 생성·실행·빌드	빠른 미리보기 환경 제공
npm	패키지 설치 도구	라이브러리/플러그인 설치 관리자
TypeScript	JavaScript에 타입 추가	컴포넌트 속성(Props) 오류 예방 완성
Bootstrap	CSS UI 프레임워크	빠른 반응형 UI 제작의 기초
React-Bootstrap	Bootstrap의 컴포넌트화	<Button>처럼 코드 단위 사용 가능
Tailwind CSS	유틸리티 클래스 기반 CSS	디자인 토큰을 클래스처럼 직관적 활용
shadcn/ui	재사용 컴포넌트 모음	현대적 SaaS UI 구축의 핵심 도구
React Router	페이지 이동 관리	IA(정보 구조)와 화면 흐름 연결
Storybook	컴포넌트 문서화·테스트

3-1. 기술 스택 및 도구 (Boilerplate)

빠른 개발과 협업을 위한 표준화된 도구 모음.

Vite: React 앱을 초고속으로 실행하고 빌드하는 작업실.
TypeScript: JavaScript에 '타입(라벨)'을 추가해 실수를 방지하는 컴포넌트 계약서 완성.
Bootstrap: 빠르게 반응형 UI를 제작하는 프레임워크 (React-Bootstrap으로 컴포넌트화).
Boilerplate: 프로젝트 시작 시 필요한 기본 구조를 미리 준비한 작업 시작 세트 완성.

[실습] AI 활용한 앱 아이디어 기획 ➜ 디자인

팀 구성 ➜ 관심 주제 선정 (음악과 술) ➜ Nvidia 데이터셋에서 SQL, 적절한 인물 선정하여 페르소나 생성 ➜ PRD 제작 + 페르소나 DB 원형 정리 ➜ 원하는 API 검색 (Spotify / Cocktail DB) ➜ PRD / 페르소나 DB, API 자료 모두 선정해서 google stitch에 앱 화면 제작 요청 (그대로 claude와 figma make에도 요청해봄) ➜ 수정을 거친 후 피그마 디자인으로 불러와서 수정 ➜ 피그마 make 로 만들어보기

1) FIGMA 활용