WEB STUDY 26.03.18
AI를 실무에
활용하는 방법
프로토타입 제작 · 피그마 UI 구현 · 코드 품질 관리 · 테스트 작성
Introduction
이전 발표
3D 루빅스 큐브
Three.js 인터랙티브 퍼즐
AI로 뭘 만들 수 있는지 → AI를 실무에서 어떻게 쓰는지
Agenda
오늘 다룰 내용
01
시연용 프로토타입 제작
요구사항 수집 → AI 문서화 → Claude Code 프로토타입
02
피그마 → 웹 UI 구현
피그마 캡처 → AI 구현 워크플로우
03
코드 퀄리티 관리
AI 구현 → AI 검수 이중 레이어 구조
04
테스트 코드 작성
코드 + 기획 → TestCase 문서 → 테스트 코드
01
Case 01
시연용
프로토타입 제작
성남시 MaaS · LG 위험성 평가 · 삼성 시니어 레지던스
01
Case 01 — Workflow
요구사항 수집 → 문서화 → 프로토타입
→
→
Claude Code
문서 기반 프로토타입 생성
핵심은 정보 수집과 문서화
문서의 퀄리티가 프로토타입의 퀄리티를 결정
02
Case 02
피그마 →
웹 UI 구현
피그마 디자인을 웹 UI로 구현하는 워크플로우
02
기존 방식
디자인 분석 →
텍스트로 설명 → 구현
디자인을 분석하고 텍스트로 설명하는 과정에 시간이 소요
설명 과정에서 누락되는 부분도 발생
02
최근 방식
캡처 이미지만으로
바로 구현
AI 모델의 이미지 분석 능력 향상으로 텍스트 설명 불필요
Opus 4.5 → 4.6 이후 한 번에 동일한 UI를 뽑는 경우가 증가
03
Case 03
코드 퀄리티
관리
AI 구현 → AI 검수 이중 레이어 구조
03
이중 레이어 구조
Layer 1 — AI 구현
Claude Code로 UI 구현
↓
Layer 2 — AI 검수
커스텀 Skill로 Best Practice 적용
컴포넌트 분리 · 네이밍 · 리렌더링 최적화
AI가 만든 코드를 AI로 검수하는 구조
04
Case 04
테스트 코드
작성
코드 분석 → TC 문서 생성 → 검토 → 테스트 코드
04
코드 → 바로 테스트 vs
코드 → TC → 테스트
일반적 접근
코드 → AI → 테스트 생성
구현 사실만 확인하는
형식적인 테스트가 나옴
더 나은 접근
코드 분석 → TC 문서 생성 → 검토 → 테스트 코드
TC를 먼저 만들고 검토하면
훨씬 정밀한 테스트가 나옴
중간 단계(TC)를 거치는 것만으로 테스트 품질이 크게 달라진다
"실무에서 AI를 잘 활용하기 위해 중요한 것은
프롬프트를 잘 쓰는 게 아니라,
업무 프로세스를 잘 설계하는 것"
감사합니다