하려던 것 📝
다수 프로젝트 동시 진행에 따른 일정 관리의 한계 HRD 컨설턴트는 여러 기업의 교육과 컨설팅 프로젝트를 동시에 수행합니다. 프로젝트 수가 늘어날수록 각 일정의 타임라인을 한눈에 파악하기 어려워졌고, 기존에 사용하던 노션이나 메모장 수동 정리 방식은 누락에 대한 불안감이 있었습니다.
반복적이고 치명적인 고정 업무의 자동화 필요성 교육 프로젝트는 '교육 7일 전 교재 발주', '1일 전 강사 리마인드', '종료 후 세금계산서 발행' 등 정형화된 고정 태스크가 반복됩니다. 사소하지만 놓칠 경우 운영상 치명적인 사고로 이어지는 이러한 업무들을 매번 수동으로 챙기는 비효율을 해결하고 싶었습니다.
실무 맞춤형 대시보드 직접 개발 결심 Trello나 Notion 같은 범용 협업 툴은 HRD 업무 프로세스에 최적화된 기능을 제공하는 데 한계가 있었습니다. 교육 시작일만 입력하면 이전 마일스톤이 역산되어 자동으로 캘린더에 배치되는, 오직 HRD 프로젝트 관리에 특화된 대시보드를 직접 구축하기로 결정했습니다.
활용한 툴 ⚒️
Claude (기획 및 요구사항 정의) 코드를 작성하기 전, 추상적인 아이디어를 구조화하는 데 활용했습니다. 기능 정의, UI/UX 화면 구상, 개발의 기준이 되는 PRD(제품 요구사항 정의서) 작성과 초기 HTML 목업 화면 구성을 클로드와의 대화로 완료했습니다.
Claude Code (로컬 개발 환경 구현) VS Code 터미널 환경에서 실행되는 Claude Code를 통해 로컬 개발을 진행했습니다. 웹 브라우저와 에디터 간의 코드 복사-붙여넣기 과정 없이, 터미널 내에서 직접 React와 TypeScript 코드를 생성하고 수정 지시를 반영했습니다.
기술 스택 (Vite, React, TypeScript, Tailwind CSS, FullCalendar, Zustand) 가볍고 빠른 웹 애플리케이션을 만들기 위해 구성한 조합입니다. 일정 시각화를 위해 FullCalendar 라이브러리를 사용했으며, 전역 상태 관리를 위해 가벼운 Zustand를 도입하여 매끄럽고 반응성 빠른 대시보드를 구축했습니다.
진행 세부 내용 🔍
Lovable(노코드)에서 Claude Code(코딩)로의 전환 초기에는 노코드 툴인 Lovable을 통해 빠르게 화면을 그리는 것으로 시작했습니다. 하지만 '특정 날짜 기준으로 일정을 역산하여 캘린더에 자동 동기화'하는 세밀한 데이터 로직 제어가 필요해지면서 노코드의 한계를 느꼈고, 소스코드 직접 제어가 가능한 Claude Code 환경으로 전환했습니다.
기획에서 화면 구현까지의 단계적 진행 무작정 개발을 시작하지 않고 단계를 구분했습니다.
[아이디어 구체화] → [기본 구조 검증을 위한 HTML 목업 제작] → [기능 범위를 확정하는 PRD 작성]순으로 진행했습니다. 개발 도구인 Claude Code에게 이 PRD를 사전 학습시키고 개발에 착수하여 작업 오류를 크게 줄였습니다.기능 단위의 점진적 구현 전체 시스템을 한 번에 만들지 않고 마이크로 단위로 나누어 개발했습니다. 메인 캘린더 뷰 구현을 시작으로 프로젝트 등록 폼, 날짜별 할 일 목록 상세 패널, 수동 태스크 추가 등 핵심 기능을 단계별로 하나씩 검증하며 살을 붙여 나갔습니다.
시행착오 ⚠️
TypeScript 타입 에러(Type Error) 해결의 어려움 안정적인 실행을 돕는 TypeScript의 엄격한 타입 정의가 비개발자에게는 큰 진입 장벽이었습니다. 사소한 타입 불일치로 컴파일 에러가 발생할 때마다 원인을 파악하기 어려웠고, 에러 수정 과정에서 다른 기능의 코드가 꼬이는 시행착오를 겪었습니다.
상태 관리와 로컬 스토리 지 동기화 오류 브라우저 저장소(localStorage)와 애플리케이션 상태 간의 데이터 동기화 과정에서 오류가 있었습니다. 데이터가 추가되었음에도 화면이 실시간으로 갱신되지 않는 현상이 발생했고, 상태(State)의 흐름과 데이터 수명 주기를 이해하기 전까지 많은 디버깅 시간을 소요했습니다.
프롬프트 상세성에 따른 결과물의 품질 차이 모호한 개발 요청은 원하는 결과물로 이어지지 않았습니다. 예외 처리 상황(예: 마감일 역산 시 영업일 기준 계산, 과거 날짜 예외 처리 등)에 대한 명확한 규칙을 기획 단계에서 꼼꼼히 정의하지 않으면 AI 역시 비논리적인 코드를 생성함을 확인했습니다.
배운 점 📚
개발 과정을 통한 논리적 사고 방식 체득 React의 컴포넌트 설계와 데이터 단방향 흐름을 직접 다루면서, 코딩이 단순한 기술 구현이 아니라 '문제를 최소 단위로 쪼개어 인과관계에 맞게 해결하는 논리적 훈련'임을 배웠습니다.
HRD 기획과 소프트웨어 개발의 공통점 발견 교육 과정을 기획하는 흐름과 소프트웨어 요구사항을 설계(PRD 작성)하는 과정이 구조적으로 매우 닮아 있음을 깨달았습니다. 대상(사용자)의 불편함을 분석하고 목적(Input-Output)을 명확히 정의하는 기획 역량이 개발 프로세스에서도 유효하게 작용했습니다.
AI 협업 시대 기획자 역할의 중요성 AI 도구 덕분에 실제 코드를 구현하는 허들은 매우 낮아졌습니다. 가장 중요한 역량은 "무엇을, 왜 만들어야 하는가"를 정확히 정의하는 비즈니스 도메인 지식과 문제 정의력이며, 기획력이 뒷받침된다면 비개발자도 충분 히 1인 메이커가 될 수 있음을 검증했습니다.
향후 계획 🧭
1단계: 데이터 안정성을 위한 Google Sheets 연동 현재 브라우저 캐시에만 의존하는 데이터 저장 방식을 개선하여 Google Sheets API와 연동할 계획입니다. 이를 통해 기기 독립적인 데이터 접근성을 확보하고, 추후 타 서비스나 에이전트와의 데이터 연동을 위한 인프라를 마련하고자 합니다.
2단계: Hermes 에이전트를 통한 업무 자동화 로컬 환경의 AI 에이전트 'Hermes'를 결합할 예정입니다. 아침마다 당일 업무와 마감 태스크를 요약해 알려주는 '데일리 브리핑 에이전트', 메일함이나 노션을 감시하다가 신규 계약 체결 시 대시보드에 자동으로 일정을 등록해 주는 '자동 등록 에이전트' 두 가지를 단계별로 구현하겠습니다.
3단계: 컨설팅 프로젝트 템플릿으로 서비스 확장 현재 교육 운영 중심의 D-day 역산 룰을 넘어, 프로세스가 상이한 '일터혁신 컨설팅' 및 '기업 진단 컨설팅' 전용 템플릿과 고정 업무 계산 규칙을 고도화하여 적용할 예정입니다.
도움이 필요한 점 🤝
이메일 및 외부 데이터 연동 자동화 방안 고객 및 협력사와 주고받은 이메일(당사 사용 메일 서비스: 메일나라)과 노션 데이터를 파싱하여, 신규 프로젝트 감지 시 일정을 자동으로 세팅하는 파이프라인을 구축하고 싶습니다. 비개발자 수준에서 외부 이메일 데이터를 안전하고 저비용으로 추출하여 AI 에이전트가 읽을 수 있도록 연동하는 효율적인 아키텍처나 도구 추천을 구합니다.
