요즘 개인 프로젝트로 이것저것 웹에서 만들어보고 있다.
그 과정에서 개인적으로 사용할 간트차트(Gantt Chart) 라이브러리를 하나 직접 만들어보려고 했다.
“GPT도 있는데 금방 되겠지”라는 생각으로 시작했는데, 결과적으로는 완성하지 못하고 중간에 방향을 접었다.
정확히 말하면, 포기했다기보다는 개인 프로젝트에 투자할 시간이 부족해지면서 우선순위에서 밀린 상태에 가깝다.
그래도 이 과정을 통해 생각보다 많은 걸 배웠고,
나중에 다시 봐도 도움이 될 것 같아 이번 경험을 기록으로 남겨두려고 한다.
왜 직접 만들려고 했나?
기존 라이브러리들은 커스터마이징이 어렵거나 구조가 너무 복잡하거나 내가 원하는 UI/UX와 안 맞았다.
특히 “이 기능만 있으면 되는데…” 싶은 포인트들이 항상 하나씩 빠져 있었다.
그래서 그럼 내가 필요한 기능만 딱 있는 걸 만들어보자 라는 생각으로 시작했다.
초기 설계
- 기술 스택 : JS + 간단한 HTML/CSS
- 목표 : 기간과 태스크 수를 선택하면 간트차트가 생성, 한눈에 볼 수 있도록 날짜 범위 변경, 날짜 기반 타임라인, 드래그로 기간 조절, 태스크 계층 구조 표현, 커스텀 필터
이번에도 “GPT와 함께 데이터 구조만 잘 만들면 렌더링은 어떻게든 되겠지” 라고 생각했다.
지금 생각해 보면, 이때부터 이미 너무 쉽게 보고 있었던 것 같다.
현실: 상태 관리 지옥
문제는 언제나 사소한거 부터 시작이었다.
처음에는 태스크 하나만 움직이면 될 줄 알았다.
그런데 막상 구현해 보니, 태스크 하나를 옮기면 전체 레이아웃을 다시 계산해야 했고
스크롤 위치를 다시 맞춰야 했고 수정이나 삭제버튼 누르면 전체 너비가 다시 바뀌었다.
GPT로 30분만 투자해서 대충 형태라도 만들어보자라고 시작한 작업이,
정신 차려보니 1시간이 훌쩍 넘어가고 있었다.
GPT의 한계도 느꼈다
GPT에게 "간트차트 구조 설계해줘" 라고 하면 그럴듯한 코드를 준다.
하지만 그 상태에서 실제로 기능을 하나씩 추가하기 시작하면,
그 구조는 금방 한계에 부딪힌다.
오히려 대충 나온 구조를 억지로 고치느니, 처음부터 직접 만드는 게 나을 정도였다.
이 과정을 겪으면서 느낀 건, 디테일한 설계를 바탕으로 한 구체적인 프롬프트가 아니면,
GPT는 큰 도움이 되기 어렵다는 점이었다.
결국 중단
기능 하나를 추가할 때마다 기존 코드 구조는 점점 흔들리기 시작했다.
고치면 고칠수록, 내가 직접 손을 봐야 하는 부분도 계속 늘어났다.
그래서 “ 이건 지금 구조를 붙잡고 가는 게 아니라,
아예 프롬프트부터 다시 짜서 처음부터 다시 해야 하는 작업이구나 ”
그래서 이 프로젝트는 미련 없이 여기서 중단하기로 결정했다.
얻은 것
이번 실패를 통해 몇 가지 확실히 배운 점이 있다.
첫째, 프롬프트는 디테일할수록 내가 직접 해야 할 일이 줄어든다.
대충 던진 요청에도 GPT는 그럴듯해 보이는 코드를 만들어주지만,
그 코드는 실제 프로젝트에 쓰기에는 구조적으로 한계가 명확했다.
둘째, 코드를 “대신 만들어주는 도구”로 쓰기보다는, “옆에서 도와주는 도구”로 쓰는 게 훨씬 효율적이라는 걸 느꼈다.
실제로는 Cursor나 Copilot처럼 코드 흐름 안에서 보조해 주는 형태가 더 잘 맞았다.
다음 계획
당장은 이 구조를 그대로 이어가기보다는,
프롬프트 설계부터 다시 정리해서 간트차트를 다시 한번 만들어볼 생각이다.
그전에, 연습 겸 더 작은 규모의 간단한 UI 컴포넌트나 라이브러리부터 만들어보면서
구조 설계 연습을 조금 더 해보려고 한다.
마무리
이번 프로젝트는 결과적으로는 실패로 끝났지만,
이런 종류의 실패는 나중에 반드시 실력으로 돌아온다고 믿는다.
다음에는 단순히 “만들어보기”가 아니라,
“왜 기존 라이브러리들은 저런 구조로 설계되어 있는지”
부터 하나씩 분석해보려고 한다.
그 과정을 또 한 번 정리해서 기록으로 남겨볼 생각이다.
'Programmer > JAVASCRIPT' 카테고리의 다른 글
| jQuery Ajax async:false 사용 시 렌더링이 멈추는 이유와 해결 방법 (0) | 2026.03.05 |
|---|---|
| 티스토리 ‘내 블로그 수익 예측하기’를 참고해 직접 만들어본 간단 계산기 (0) | 2026.01.23 |
| history.back() 대신 뭘 써야 할까? 웹앱에서의 뒤로 가기 정리 (0) | 2026.01.08 |
| jQuery 여러 Ajax 요청 완료 후 실행하기: $.when.apply + done/fail 예제 (0) | 2026.01.07 |
| JavaScript for문 vs forEach vs for...of – 언제 어떤 걸 써야 할까? (0) | 2026.01.06 |