01 — Profile

AI 프로덕트 설계부터
기업 개발환경 구축까지

LLM을 붙인 서비스를 만들고, 회사 안에서 그 도구가 실제로 굴러가도록 개발 환경을 정리하는 일을 함. 화면 쪽 작업에서 시작해 API와 데이터 계층까지 범위가 넓어진 편이고, 지금은 검색·생성 계층까지 함께 보는 경우가 많음.

새 기술을 빨리 얹는 것보다 팀이 계속 고쳐 쓸 수 있는 상태로 남기는 쪽에 관심이 큼. 강의와 책을 붙잡고 있는 것도 같은 이유. 설명할 수 있을 만큼 정리되지 않은 기술은 실무에서도 오래가지 못한다는 생각.

현재 정부 지원사업에 선정된 스타트업 디코드랩 운영. IT 기업과 청년 일자리를 연계하는 일을 병행.

  • AI Engineering
  • Full-stack
  • Education
  • Consulting
02 — Focus

AI 서비스 개발, 기업 개발환경 구축, 응용 SW 개발 세 가지를 병행하고 있음. 성격은 달라 보이지만 결국 같은 문제를 다루는 일이라 서로 도움이 되는 편.

  • AI Education Platform

    AI 교육 플랫폼 개발

    강의 콘텐츠를 청킹·임베딩해 RAG 파이프라인으로 구성하고, 학습자 질문에 문맥을 참고한 답을 돌려주는 형태로 운영 중. Next.js App Router 와 Vector DB 조합으로 구성.

  • Enterprise AI Workflow

    기업 AI 개발환경 구축 · 컨설팅

    사내 문서를 검색 가능한 형태로 인덱싱하고, 프롬프트 사용 기준과 코드 리뷰·문서화 절차를 자동화하는 환경 구성. 도입 초기 세팅과 팀 교육까지 함께 진행.

  • Application Software

    응용 SW 개발

    공공기관·기업 대상 웹 서비스와 업무 시스템 개발. 요구사항 정리부터 화면 설계, API 설계, 배포·운영까지 이어서 수행.

03 — Pipeline

RAG 기반 서비스에서 반복적으로 쓰게 되는 구성. 교육 플랫폼이든 사내 시스템이든 골격은 비슷하고, 데이터 성격에 따라 청킹 기준과 검색 방식을 바꾸는 정도로 대응하는 경우가 많음.

  1. Ingest

    데이터 수집

    사내 문서 · 강의 콘텐츠 · 코드베이스 수집

    01
  2. Preprocess

    청킹 · 정규화

    문서 구조 기반 분할, 메타데이터 부여

    02
  3. Embed

    임베딩 생성

    벡터 변환 및 차원·비용 트레이드오프 조정

    03
  4. Store

    Vector DB 적재

    pgvector 인덱싱, 하이브리드 검색 대비 구성

    04
  5. Retrieve

    검색 · 리랭킹

    유사도 검색 후 재순위화로 컨텍스트 선별

    05
  6. Generate

    LLM 응답 생성

    프롬프트 조립, 툴 호출, 스트리밍 응답 반환

    06
04 — Stack

각 영역을 따로 공부했다기보다, 제품 하나를 끝까지 만들다 보니 필요해서 붙은 목록에 가까움. 깊이는 영역마다 차이가 있고, 아래는 실제 프로젝트에서 사용해 본 것들.

  • Design

    디자인

    • Figma
    • Photoshop · Illustrator
    • 디자인 시스템 설계
    • 타이포그래피 · 그리드
    • 브랜드 아이덴티티

  • UI / UX

    인터랙션 설계

    • 사용자 플로우 설계
    • 인터랙티브 모션 (GSAP · Framer Motion)
    • 웹 접근성 (WCAG)
    • 반응형 · 디바이스 전략
    • 프로토타이핑

  • Frontend

    프론트엔드

    • Next.js (App Router) · React
    • TypeScript
    • TailwindCSS · CSS Architecture
    • SSR · ISR · SEO 최적화
    • 상태관리 (Zustand · React Query)
    • 시멘틱 HTML · 웹 표준

  • Backend

    백엔드 · 인프라

    • Node.js · Spring Boot (JAVA)
    • REST API 설계 · 인증 (JWT · OAuth)
    • PostgreSQL · Prisma · JPA
    • Docker · CI/CD
    • Vercel · 클라우드 배포 운영

  • AI Engineering

    AI 엔지니어링

    • LLM API 연동 (Claude · GPT)
    • RAG 파이프라인 설계
    • Vector DB · pgvector · 임베딩 전략
    • 프롬프트 엔지니어링 · 컨텍스트 설계
    • 에이전트 워크플로우 · Tool Use · MCP
    • AI 코딩 어시스턴트 도입 · 사내 표준화
05 — Distribution

잘하는 것을 점수로 매기는 대신, 실제로 시간을 어디에 쓰는지를 정리한 자료. 특정 영역에 몰아넣기보다 개발과 교육 양쪽을 유지하는 편이 결과적으로 둘 다 나아진다고 보고 배분을 조정하고 있음.

기술 영역 분포

AI · 데이터88

프론트엔드95

백엔드 · 인프라72

UI · UX84

교육 · 집필90

최근 작업에서 각 영역을 다룬 비중. 숙련도 평가가 아니라 손이 자주 가는 쪽의 기록에 가까움.

업무 형태 비중
40%

AI 서비스 · 플랫폼 개발

AI 서비스 · 플랫폼 개발
40%
교육 · 강의
25%
개발환경 구축 · 컨설팅
20%
집필
15%

개발이 절반을 넘지 않도록 두는 편. 강의와 집필에서 정리한 내용이 실제 개발 판단에 도움이 되는 경우가 많음.

06 — Teaching

금융 · 게임 · 제조 등 기업 실무자를 대상으로 한 직무 교육 진행. 교재 순서를 따라가기보다 그 팀이 실제로 쓰는 절차에 맞춰 커리큘럼을 다시 짜는 편이고, 그 과정에서 배우는 것도 많음.

  • 01

    하나금융

    AI 활용 개발 워크플로우 자동화 교육

  • 02

    대한상공회의소

    JAVA · Spring Boot · Next 통합 업무설계 교육

  • 03

    넥슨코리아

    사내 프론트엔드 개발 직무 교육

  • 04

    패스트캠퍼스

    최성일의 초격차 UI 인터랙티브 모션 (온라인)

  • 05

    서울산업진흥원

    스타트업을 위한 웹개발 특강

07 — Books

웹 인터랙션 · 프론트엔드 실무서 두 권 출간, 두 권 모두 세종도서 학술부문에 선정됨. 세 번째 책은 Next.js 와 AI를 함께 쓰는 SaaS 개발을 주제로 준비 중.

  • 인터랙티브 웹디자인북

    한빛미디어

    2016 세종도서 학술부문 우수도서 선정

  • Do it! 인터랙티브 웹페이지 만들기

    이지스퍼블리싱

    2022 세종도서 학술부문 우수도서 선정

  • Do it! Next.js + AI를 활용한 SaaS 서비스 개발

    이지스퍼블리싱

    2026년 10월 출간 예정

08 — Contact

교육 · 협업 · 개발환경 도입 관련 문의는 메일로 주시면 확인 후 회신. 어떤 상황인지 간단히 적어 주시면 도움이 될 만한 방향을 먼저 정리해 답장 드림.

hadaboni80@naver.com