01 CLASS OI
UI Architect
Course▲ Next.js + AI 실무 설계
웹퍼블리셔에서 UI 설계자로AI시대 필요한 생존 스킬실무 연계
02 HOW
Solution
for AI▲ AI 시대 웹퍼블리셔와 기업간의 딜레마
AI시대 퍼블리셔 생존법UI설계자로 넘어가야 하는 이유수요와 공급의 완벽한 매칭
03 WORKS
UI Animation
Lab▲ Interactive Motion Examples
수업 예제 갤러리GSAP 기반 인터랙티브 모션구조 분석 가이드 포함
04 PARTNER
Partnership
Hub▲ 기업 협약 · 전문가 매칭
기업과 UI설계전문가 매칭소규모 시작 · 리스크 제로DCODELAB QA 관리
05 THOUGHTS
Insight
& Story▲ 교육 현장의 생각과 이야기
AI 시대 업무 방향에 대한 생각현장에서 느낀 이야기들기술 너머에 있는 생각을 기록합니다
Posts
- 01.
브라우저는 HTML을 어떻게 화면에 그릴까?
DOM, CSSOM, 리플로우, 리페인트 — 브라우저가 화면을 그리는 과정을 쉽게 풀어봅니다.
ISSUE
자바스크립트 엔진은 코드를 어떻게 실행할까?
콜 스택, 이벤트 루프, 비동기 처리 — 자바스크립트가 돌아가는 원리를 알아봅니다.
jQuery에서 React로 — 화면을 다루는 방식이 완전히 달라집니다
명령형 DOM 조작과 선언적 UI의 차이를 이해하면 React가 왜 필요한지 보입니다.
- 04.
JSX — HTML인 듯 HTML이 아닌 그 문법
React에서 처음 마주치는 JSX, HTML과 뭐가 다른지 핵심만 정리합니다.
- 05.
컴포넌트 — 레고 블록처럼 UI를 조립합니다
React의 핵심 단위인 컴포넌트, 왜 UI를 쪼개야 하는지 알아봅니다.
Props — 컴포넌트끼리 데이터를 주고받는 방법
부모에서 자식으로 데이터를 전달하는 Props의 개념을 알아봅니다.
children과 합성 — 컴포넌트 안에 컴포넌트를 넣습니다
children props와 컴포넌트 합성 패턴으로 유연한 레이아웃을 만드는 방법입니다.
- 08.
상태(State) — 화면이 바뀌는 진짜 이유
React에서 화면이 업데이트되는 핵심 원리, 상태(State)의 개념을 설명합니다.
- 09.
useState — 가장 많이 쓰는 훅, 이것만 알면 절반은 끝납니다
React에서 가장 기본이 되는 useState 훅의 사용법을 알아봅니다.
ISSUE
useEffect — 화면이 그려진 다음에 할 일을 정합니다
컴포넌트가 화면에 나타난 후 실행할 작업을 관리하는 useEffect를 알아봅니다.
- 11.
훅(Hook)의 규칙 — 왜 조건문 안에서 쓰면 안 될까?
React Hook을 사용할 때 반드시 지켜야 하는 두 가지 규칙을 알아봅니다.
가상DOM — React가 화면을 빠르게 바꾸는 비밀
가상DOM이 무엇이고, 왜 React가 이 방식을 선택했는지 쉽게 설명합니다.
- 13.
리렌더링 — 언제, 왜 컴포넌트가 다시 그려질까?
React 컴포넌트가 리렌더링되는 조건과 그 과정을 이해합니다.
- 14.
key가 필요한 이유 — 리스트 렌더링의 숨은 함정
React에서 리스트를 그릴 때 key를 왜 넣어야 하는지, 안 넣으면 무슨 일이 생기는지 알아봅니다.
불변성 — 왜 직접 바꾸면 안 되고 새로 만들어야 할까?
React에서 상태를 업데이트할 때 불변성을 지켜야 하는 이유를 알아봅니다.
ISSUE
Server Component vs Client Component — 경계를 어디에 그을 것인가
use client를 어디에 붙일지 고민해본 적 있으신가요? 단순한 문법이 아니라 컴포넌트 트리 설계의 문제입니다.
- 17.
Next.js App Router에서 데이터 흐름 설계 — fetch는 어디서 해야 하는가
Page에서? Layout에서? 컴포넌트 안에서? 데이터를 어디서 가져오느냐에 따라 캐싱, 성능, 유지보수가 전부 달라집니다.
- 18.
Next.js의 캐싱 레이어를 전부 해부해봅니다
Request Memoization, Data Cache, Full Route Cache, Router Cache. 4개 레이어가 각각 언제 작동하고 언제 무효화되는지 정리했습니다.
- 19.
컴포넌트 설계: 에이전시 납품용 vs 자체 서비스용, 구조가 다르다
같은 카드 컴포넌트라도 납품용과 자체 서비스용은 설계 기준이 다릅니다. 맥락에 따라 '좋은 코드'의 정의가 바뀝니다.
- 20.
layout.tsx 하나로 프로젝트 구조가 결정된다
Nested Layout, Route Group, 에러/로딩 바운더리 배치까지. Next.js 폴더 구조는 곧 아키텍처 의사결정입니다.
- 21.
Middleware로 할 수 있는 것과 하면 안 되는 것
인증, 리다이렉트, i18n까지 — Middleware의 역할과 한계를 정확히 알아야 삽질을 줄입니다.
ISSUE
AI가 개발자를 대체한다고? 현업에서 보면 얘기가 다르다
유튜브와 매체에서는 AI가 개발자를 대체한다고 하지만, 현업에서 실제로 일어나고 있는 건 대체가 아니라 양극화입니다.
- 23.
AI한테 다 시켜봤다. 안 되는 게 분명히 있다
AI의 성능에 감탄해서 모든 걸 자동화하려 했지만, 직접 부딪혀보니 사람이 해야 하는 영역이 분명히 존재합니다.
- 24.
웹퍼블리셔가 살아남으려면 지금 당장 바꿔야 할 것
AI 시대에 웹퍼블리셔의 프론트엔드 전환은 더 이상 선택이 아닙니다. 지금이 움직여야 할 때인 이유를 설명합니다.
- 25.
AI 툴 사용법을 배우는 게 지금 가장 중요한 일이 아니다
바이브코딩, 클로드코드, 제미나이 — 유튜브에서 AI 툴 사용법을 배우고 있다면 잠깐 멈추고 생각해봐야 할 게 있습니다.
ISSUE
AI 시대, 웹퍼블리셔가 가장 먼저 잘릴까? 반대다
AI가 코드를 짜주니까 퍼블리셔가 먼저 사라질 거라고? 현업에서 보면 정반대의 일이 일어나고 있습니다.
에이전시가 앞으로 찾을 인력은 '작업자'가 아니라 '설계자'다
AI가 작업 속도를 올릴수록, 에이전시는 빠르게 치는 손이 아니라 전체를 보는 눈을 찾게 됩니다.
- 28.
"나는 AI를 잘 쓰고 있다"고 착각하는 3가지 신호
AI 툴을 매일 쓰고 있다고 잘 쓰고 있는 건 아닙니다. 이 3가지에 해당하면 다시 생각해봐야 합니다.
코딩 실력이 아니라 설계 관점이 연봉을 바꾼다
CSS 속성을 하나 더 아는 것보다, 왜 이 구조로 짜야 하는지 설명할 수 있는 게 더 큰 차이를 만든다.
- 30.
HTML vs TSX: 에이전시 납품 시나리오 비교
같은 UI를 HTML/CSS로 짤 때와 TSX 컴포넌트로 짤 때의 실제 코드 차이—에이전시 납품 관점에서 비교합니다.
- 31.
에이전시가 Next.js 퍼블리셔를 구하지 못하는 구조적 이유
백엔드 출신 프론트와 기존 퍼블리셔 사이의 공백—에이전시가 매번 인력 채용에서 실패하는 이유를 구조적으로 분석합니다.
- 32.
HTML/CSS 이중작업, 에이전시가 매달 얼마를 버리고 있나
퍼블리셔 산출물을 개발자가 다시 컴포넌트화하는 이 관행—실제 비용을 계산해봤습니다.
ISSUE
장기 파트너십이 가능한 교육 시스템
일회성 인력 공급이 아닌 지속적인 파트너십 구조를 만드는 교육 시스템의 설계 방향을 설명합니다.
ISSUE
5개월 과정의 구조와 검증 방식
퍼블리셔를 Next.js 실무 인력으로 전환하는 5개월 커리큘럼의 설계 의도를 설명합니다.
- 35.
최소 리스크로 테스트하는 협업 구조
에이전시가 새로운 인력과 협업할 때 리스크를 최소화하는 단계별 구조를 설명합니다.
- 36.
퍼블리셔를 프론트엔드로 착각할 때 생기는 문제
퍼블리셔와 프론트엔드 개발자의 역할 차이를 명확히 구분하고, 혼동에서 발생하는 실무 문제를 짚습니다.
- 37.
이론 중심 교육이 아닌 실무 흐름 중심 훈련
현장에서 바로 쓸 수 있는 실무 흐름을 중심으로 교육을 설계하는 이유를 설명합니다.
에이전시 입장에서 검증 가능한 인력 구조
에이전시가 인력의 실무 능력을 검증할 수 있는 구조가 왜 필요한지 설명합니다.
- 39.
유지보수 가능한 퍼블리싱 구조란 무엇인가
납품 후에도 수정이 쉬운 퍼블리싱 구조의 기준을 코드 사례와 함께 설명합니다.
협업 가능한 퍼블리셔의 기준
에이전시에서 다시 찾는 퍼블리셔에게는 공통적인 특징이 있습니다.
주말 실무 테스트 모델 설계 의도
실무 투입 전 주말 단위로 검증하는 테스트 모델을 설계한 이유를 설명합니다.
- 42.
백엔드 협업 시 가장 많이 발생하는 충돌 포인트
퍼블리셔와 백엔드 개발자 사이에서 반복적으로 발생하는 충돌 지점을 코드와 함께 정리합니다.
- 43.
에이전시가 가장 싫어하는 리스크는 무엇인가
에이전시 운영에서 가장 치명적인 리스크는 기술이 아니라 사람에게서 발생합니다.
- 44.
퍼블리셔 고도화의 3단계 모델
웹 퍼블리셔가 실무 가치를 높이기 위한 3단계 성장 경로를 제시합니다.
