📅 2026.04.28(화) - 12일차
웹 프론트엔드: 사용자 경험의 최전방
- 프론트엔드 아키텍처와 CLI(Command Line Interface) ➔ 시스템의 원리를 이해하는 디자이너의 생존 전략
- UX/UI 디자이너로서 나중에 발생할 오류의 원인을 파악하고 직접 수정하기 위해 프론트엔드의 원리 등의 개발 환경(CLI, Git) 을 이해할 필요가 있음. 사용자와 웹 디지털 프로덕트 사이의 최전방을 설계
- 프론트엔드는 디자인을 코드로 변경하여 실제 작동하게 하는 과정. 화면 뒤의 렌더링 패러다임을 이해하고 상태를 관리할 때 비로소 데이터와 UX의 연결 완성.
1. 웹 프론트엔드: 사용자와의 최전방
웹 서비스의 구조를 이해하기 위한 기초. 사용자와 만나는 인터페이스의 구조와 변천사.
- 앱과 웹의 구분: 각 환경에 맞는 인터페이스 구현.
- 프론트엔드: 개발자의 디자인을 코드로 변경하며 사용자와 최전방에서 소통하는 역할.
- 통신 구조: Local/Client와 Server 간의 데이터 주고받기.
- 렌더링 패러다임의 변화 (UX/UI가 구분해야 할 핵심):
- MPA (Multi Page Application): 여러 페이지로 구성된 고전적 방식.
- SPA (Single Page Application): 단일 페이지에서 필요한 부분만 교체. 끊김 없는 경험 완성.
- SSR (Server Side Rendering): 서버에서 렌더링 처리. 주로 게임 등 서버 부하를 조절해 사용자 쪽 가볍게 할 때 활용.
2. React와 프론트엔드의 미래: Virtual DOM
부분적인 변화를 감지하여 효율적으로 화면을 업데이트하는 혁신.
- IoC (Inversion of Control): ???
- React: HTML로 가는 중간 단계 결과물. React 관련 기본 원리만 알아도 협업 효율 극대화되지만, 더 자세히 알면 더 좋음
- Virtual DOM (가상 DOM): 전체를 다시 그리지 않고, 부분적으로 변화가 필요한 부분만을 가볍게 변경. 이를 통해 Single Page Application 구현 완성.
- React가 만들어낸 프론트엔드의 미래 구조: User Action → React UI (Components / V-DOM) → State Management → Framework layer → Backend API (Data Logic)
3. HTML / CSS 실습 및 도구
뼈대와 근육, 그리고 이를 보조하는 스마트한 도구들.
- HTML: 아무 꾸밈이 없는 순수한 뼈다귀 상태. (Hyper Text Markup Language)
- JSFiddle(http://jsfiddle.com/) & W3Schools( https://www.w3schools.com): 실시간 코딩 테스트 및 튜토리얼(HTML, CSS, JS, Python, SQL 등) 활용.
- Figma Dev 모드: Figma to HTML 플러그인 활용. (로그인 정보 확인 등은 백엔드 영역임을 인지)
 |
 |
 |
|
 |
 |
All CSS Simple Selectors
SelectorExampleExample description
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
4. 모던 개발 스택 테이블
풀스택 프레임워크와 라이브러리의 역할 분담.
| 도구 | 역할 | 비유 |
| Next.js | 풀스택 프레임워크 | 집의 설계도와 골조: 건물의 구조를 잡고, 통로(라우팅)를 만들며 손님 맞이(SSR/SEO)를 준비하는 본체. |
| Tailwind CSS | 스타일링 프레임워크 | 인테리어 가이드: 벽지를 바르고 페인트를 칠하며 공간의 규칙(Design System)을 정하는 도구. |
| shadcn/ui | UI 컴포넌트 라이브러리 | 조립식 가구: 이미 만들어진 레고 블록이지만, 취향에 맞게 색과 조합을 변경하는 가구. |
| Vite | 빌드 도구 (번들러) | 공사장 중장비: 자재를 정리하고 빠르게 가공하여 사용 가능한 상태로 출력하는 현장 관리 시스템. |
5. CLI 기본 명령어: 터미널
개발자의 필수 도구. 키보드만으로 컴퓨터 제어.
- 배워야 하는 이유:
- 빠른 속도: 복잡한 GUI 메뉴를 클릭할 필요 없이 명령어 한 줄로 즉시 작업을 해결할 수 있음
- 자동화: 반복되는 작업을 스크립트로 만들어 업무 프로세스를 획기적으로 효율화
- 서버 관리: 대부분의 클라우드 서버와 전문적인 개발 환경은 CLI를 기반으로 운영
- 강력한 제어: GUI에서 접근하기 어려운 시스템의 깊은 설정까지 직접 세밀하게 제어 가능.
- 탐색 명령어: pwd(위치 확인), ls(목록 표시: -a 숨김 파일, -l 상세 정보), cd(이동: .. 상위, ~ 홈).
- 관리 명령어: mkdir(폴더 생성), touch(파일 생성), cp(복사), mv(이동/이름 변경), rm(영구 삭제 주의, 폴더는 rm -r).
- 팁: Tab(자동 완성), ↑/↓(히스토리), Ctrl+C(강제 종료).
6. 버전 관리
- GitHub: 가지(Branch)를 치고 새로운 버전을 만들며, 필요시 이전 버전으로 복구하는 히스토리 관리 완성.
- Google Antigravity: 새로운 방식의 빌드 및 인터페이스 참고.
[실습] 터미널에 Claude 연동!
Google Antigravity
Google Antigravity
Google Antigravity - Build the new way
antigravity.google
자신감을 재충전하고 싶을 때 보는 영상 - 스스로를 믿어보기
https://youtu.be/JJYz8pyXOG4?si=8uB7zTrVDukBuUqR