01 — Overview

단순 퍼블리셔도, 단순 개발자도 아닌 — UI 설계 전문가를 양성합니다

본 과정은 단순히 AI에게 '만들어줘'를 시키는 교육이 아닙니다. 웹퍼블리싱의 정밀한 UI 감각, 프론트엔드의 컴포넌트 설계력, 그리고 AI의 생산성을 결합한 새로운 포지션의 전문가를 양성합니다. 5개월간 단계별 미션을 통과해야 하며, 전 과정 이수자에게 협약 기업과의 프로젝트 참여 기회를 제공합니다. 훈련생 모집 역시 선별적으로 진행하여 교육의 밀도와 수료생의 전문성을 보장합니다.

02 — Curriculum

각 단계는 실무 미션 기반으로 진행되며, 통과하지 못하면 다음 단계로 넘어갈 수 없습니다. 전 과정에 걸쳐 AI를 실무 도구로 적극 활용합니다.

Next.js 컴포넌트화TSX 마크업 전환반응형 설계 고도화

GSAP TimelineScrollTrigger페이지 전환 효과

WCAG · ARIA키보드 내비게이션바닐라 JS 로직

API 연동 설계DTO 기반 타입 매핑에러 핸들링 패턴

협업 · QA 시뮬레이션코드 리뷰 · PRQA 워크플로

01

Level 1

컴포넌트 기반 퍼블리싱

기존 HTML/CSS 퍼블리싱 산출물을 Next.js 환경에서 컴포넌트 단위로 고도화합니다. 시멘틱 마크업과 반응형 레이아웃을 TSX 컴포넌트로 재설계하며, AI를 활용한 마크업 검증과 접근성 점검을 병행합니다.

02

Level 2

GSAP 모션 · 슬라이더

GSAP 핵심 API, Timeline, ScrollTrigger를 활용한 실무 UI 모션 구현. 슬라이더, 스크롤 트리거, 페이지 전환 효과를 직접 구현하고, AI를 활용해 복잡한 인터랙션 로직 설계와 디버깅을 가속합니다.

03

Level 3

웹접근성 · JS 로직

WCAG 기반 웹접근성 구현, ARIA 패턴, 키보드 내비게이션. 바닐라 JS로 UI 인터랙션 로직을 직접 구현하며 프로그래밍 사고를 훈련하고, AI를 활용해 접근성 감사와 코드 품질 검증을 자동화합니다.

04

Level 4

백엔드 협업 최적화

Spring API 명세서를 기반으로 프론트엔드-백엔드 데이터 흐름을 이해하고, API 연동에 최적화된 TSX 컴포넌트를 설계합니다. AI를 활용해 API 명세 분석, 타입 생성, 에러 핸들링 패턴을 자동화하여 백엔드 개발자와의 협업 효율을 극대화합니다.

05

Level 5

협업 · QA 시뮬레이션

Git 브랜치 전략, 코드 리뷰, PR 프로세스 실습. 실제 에이전시 프로젝트와 동일한 환경에서 QA 피드백 대응까지 시뮬레이션하며, AI 기반 코드 리뷰와 품질 검수 워크플로를 구축합니다.

03 — Why This Program

같은 문제의 양면입니다

퍼블리셔가 막혀 있는 그 벽과, 에이전시가 풀지 못하는 그 문제는 사실 하나로 연결되어 있습니다. 이 과정은 양쪽의 문제를 동시에 해결하기 위해 설계되었습니다.

퍼블리셔의 성장 한계와 에이전시의 구조적 비효율, 이 과정이 동시에 해결합니다

퍼블리셔

커리어 정체스킬셋 한계포지션 소멸단가 하락

성장 경로 →

UI ArchitectDCODELAB

← 인력 공급

에이전시

이중작업품질 불균형교육 비용채용 리스크

퍼블리셔 → 컴포넌트 설계자로 전환하나의 과정, 양쪽의 해결에이전시 → 즉시 투입 가능 인력 확보

퍼블리셔가 겪는 현실

React 강의 완강했는데, 실무에서 한 줄도 못 쓰지 않았나요?

Todo 앱은 만들 수 있는데, 실무 프로젝트 앞에서 멍해집니다. 강의와 현장의 간극이 너무 크고, 그 사이를 메워줄 사람이 없었습니다.

UI 감각이 강점인데, 그걸 인정받을 포지션이 없지 않나요?

채용 공고에 '퍼블리셔'는 점점 사라지고, '프론트엔드 개발자'만 남았습니다. 요구 스펙을 보면 내가 갈 수 있는 길인지 막막해집니다.

개발자 되려면 백엔드부터 배우라는데, 그게 맞는 길인가요?

Node, DB, 인증, 배포… 퍼블리셔에게 풀스택은 너무 먼 우회로입니다. 당신의 강점은 UI인데, 그걸 살릴 전향 경로는 아무도 알려주지 않았습니다.

퍼블리싱 단가는 계속 내려가는데, 탈출구가 보이시나요?

경력이 쌓여도 단가가 오르지 않고, AI가 퍼블리싱 영역까지 침투하고 있습니다. 지금의 스킬셋으로 5년 후에도 같은 수입을 유지할 수 있을까요?

에이전시가 겪는 현실

신입을 뽑아서 3개월 교육했는데, 그 신입이 퇴사하면?

자체 교육에는 시니어의 시간이 빠집니다. 3개월간 생산성 0, 교육 끝나면 이직. 교육 비용은 고스란히 매몰 비용이 됩니다.

UI 감각 있는 Next.js 인력, 시장에서 구해본 적 있으십니까?

백엔드 출신은 UI·모션 퀄리티가 떨어지고, 퍼블리셔는 Next.js를 못합니다. 결국 어중간한 인력에 타협하거나, 두 명을 써야 합니다.

퍼블리셔가 만든 HTML, 개발자가 또 컴포넌트로 다시 만들고 있지 않습니까?

퍼블리셔는 HTML/CSS로 납품하고, 개발자는 그걸 다시 React 컴포넌트로 변환합니다. 같은 UI를 두 번 만드는 이중작업에 매 프로젝트 수백만 원이 낭비됩니다.

외주 퍼블리셔, 매번 결과물 품질이 다르지 않습니까?

컨벤션 안 맞고, 커뮤니케이션 안 되고, 수정하면 추가 비용. 결국 내부 인력이 뒤처리하느라 외주의 의미가 사라집니다.

같은 UI를 두 번 만들고 있습니다

현재 에이전시의 프론트엔드 워크플로와, 수료생 투입 후 워크플로를 비교합니다

BEFORE

퍼블리셔HTML / CSS 납품개발자 재작업React 컴포넌트

이중작업

AFTER

수료생TSX 컴포넌트 직접 산출프로덕션 투입

단일 워크플로

작업 단계 4단계 → 2단계

이중작업 제거

산출물 품질 컴포넌트 레벨

왜 Next.js 컴포넌트 기반으로 고도화하는가

기존 퍼블리싱(HTML/CSS 납품)은 개발자가 다시 컴포넌트로 변환해야 합니다. Next.js TSX 컴포넌트로 직접 작업하면 이 이중작업이 사라집니다.

AI 시대, 단순 마크업은 AI가 대체할 수 있습니다. 하지만 컴포넌트 설계, 접근성, 모션, API 연동까지 아우르는 UI 설계 역량은 AI만으로 대체되지 않습니다.

퍼블리셔의 강점인 정밀한 UI 감각은 그대로 유지하되, 산출물의 형태만 HTML에서 TSX 컴포넌트로 전환합니다. 새로운 직군이 아니라, 기존 역량의 자연스러운 확장입니다.

AI가 양쪽에 주는 실질적 도움

퍼블리셔 → AI로 마크업 검증, 접근성 감사, 복잡한 인터랙션 로직 자동화, API 명세 분석까지. 혼자서도 시니어급 품질을 낼 수 있는 생산성을 확보합니다.

에이전시 → AI를 활용하는 작업자는 코드 리뷰, 품질 검수, 컨벤션 준수를 스스로 자동화합니다. 관리 비용이 줄고 산출물 품질이 일정하게 유지됩니다.

이 과정은 양쪽의 문제를 동시에, 동등한 입장에서 해결합니다

수료생은 처음부터 TSX 컴포넌트를 작업합니다 — 퍼블리셔는 새 커리어를, 기업은 이중작업 구조 해소를 얻습니다.

UI 감각 + 컴포넌트 설계력 + AI 활용 — 세 가지를 겸비한 UI 설계 전문가라는 새로운 포지션을 만듭니다.

소규모 프로젝트로 시작하여 양측이 리스크 없이 업무 합을 맞춰봅니다 — 신뢰가 쌓이면 규모를 확대합니다.

훈련생과 협약 기업 모두 선별적으로 모집합니다 — 동등한 파트너십을 위해 양측의 전문성과 환경을 검증합니다.