HTML Writer는 복잡한 HTML 구조를 쉽고 빠르게 생성할 수 있도록 돕는 저작 도구입니다. 미리 정의된 디자인 토큰과 레이아웃 패턴을 활용하여, 코드 작성 없이도 스타일 가이드에 부합하는 웹 페이지를 구성할 수 있습니다.
HTML Writer is an authoring tool designed to help create complex HTML structures easily and quickly. Utilizing predefined design tokens and layout patterns, users can compose web pages that adhere to style guides without writing code.
이 프로젝트는 정적 사이트 제너레이터(SSG)를 위한 전처리기로도 활용 가능하며, 일관된 UI/UX 유지를 보장합니다.
This project can also be used as a preprocessor for Static Site Generators (SSG), ensuring consistent UI/UX maintenance.
| 기술 | Tech | 역할 | Purpose |
|---|---|---|---|
TypeScript |
안정적인 컴포넌트 로직 및 타입 정의 | Stable component logic and type definitions | |
Vanilla JS |
경량 런타임 및 DOM 조작 | Lightweight runtime and DOM manipulation | |
CSS Variables |
동적 테마 및 디자인 시스템 관리 | Dynamic theme and design system management | |
Markdown-it |
마크다운 파싱 및 확장 커스텀 렌더러 | Markdown parsing and extended custom renderer |
lang-ko, lang-en 구조를 자동으로 매칭하여 삽입lang-ko and lang-en structuresHTML Writer는 단순한 텍스트 변환을 넘어, 여러 특화된 AI 에이전트가 협력하여 고품질의 웹 콘텐츠를 생산하는 에이전틱 워크플로우(Agentic Workflow)를 채택하고 있습니다.
Beyond simple text transformation, HTML Writer employs an Agentic Workflow where multiple specialized AI agents collaborate to produce high-quality web content.
에이전틱 AI는 단일 LLM 호출의 한계를 극복하기 위해 '계획-실행-검증'의 반복 루프를 수행하며, 각 단계에서 전문화된 페르소나를 활용합니다.
Agentic AI overcomes the limitations of single LLM calls by performing an iterative 'Plan-Act-Verify' loop, utilizing specialized personas at each stage.
STYLE_GUIDE.md의 디자인 토큰과 레이아웃 규칙을 준수하는지 검사하고 교정합니다.STYLE_GUIDE.md.| 단계 | Stage | 설명 | Description |
|---|---|---|---|
| 컨텍스트 주입 | Context Injection | 프로젝트의 스타일 가이드와 기존 문서 패턴을 AI의 시스템 프롬프트에 동적으로 결합 | Dynamically combine project style guides and existing document patterns into the AI's system prompt |
| 초안 생성 | Draft Generation | Planner와 Content 에이전트가 협업하여 기본 마크다운 및 다국어 구조 생성 | Planner and Content agents collaborate to generate basic Markdown and multilingual structures |
| 컴포넌트 인젝션 | Component Injection | 단순 텍스트를 스타일 가이드에 정의된 doc-header, callout 등의 시맨틱 태그로 치환 |
Replace simple text with semantic tags like doc-header and callout defined in the style guide |
| 최종 검증 및 정제 | Validation & Refinement | Validator가 링크 유효성, 태그 중첩 에러, 스타일 일관성을 최종 확인 후 배포형 파일 생성 | Validator performs final checks on link validity, tag nesting errors, and style consistency before generating the deployable file |
상기 구조도는 에이전트 간의 유기적인 협업을 시각화한 것입니다. 각 에이전트는 독립된 루프를 돌며 자신의 결과물을 다음 단계로 전달하거나, Validator의 피드백을 받아 수정합니다.
The architecture diagram above visualizes the organic collaboration between agents. Each agent runs an independent loop, passing its output to the next stage or refining it based on feedback from the Validator.
Admin 웹앱(devprofile-admin.vercel.app)은 이 저작 도구의 사용자 인터페이스입니다. GitHub 로그인 후 자연어 프롬프트를 입력하면 백엔드 파이프라인이 페이지를 생성하거나 편집합니다.
The Admin web app (devprofile-admin.vercel.app) is the user interface for this authoring tool. After GitHub sign-in, natural-language prompts trigger the backend pipeline to create or edit pages.