AI 만으로 사이트 만들기? 가능할까?

 

A-Z까지 전부 웹 사이트를 AI로 구현할 수 있을까?

 

요즘 화두는 AI이다.

• "신입 개발자보다 AI 하나가 더 일을 잘한다."
• "AI를 잘 사용하는 개발자 채용."

회사에서 AI로 코드 리뷰도 해보고, 기능 요구 정도는 해봤지만, 프로젝트 개발 처음부터 끝까지 AI만으로 가능할까?

이 궁금증으로 새해부터 간단한 웹 프로젝트를 시작해 보았다.

 

🤖 AI 선택

Gemini, ChatGPT, Cursor, Claude 등 많겠지만, 내가 선택한 AI는 Claude Code다. 

Claude Code 유로이지만 프로그래밍에 강점이 있고, Terminal에서 명령할 수 있다는 장점으로 인해 선택했다.

(Cursor도 Cursor CLI가 있는데 이때는 있는지 몰랐다; )

게다가 플러그인을 추가하면 그에 맞는 역할로 더 잘 응답해준다고 한다. 

- 플러그인은 이미 정의된 룰이다. (예, frontend-design)

 

🛃 개발 조건

내가 절대 손댈 수 없도록!

나의 프로젝트 진행 전제 조건은 딱 4가지 이다.

1. IDE은 절대로 열지 않을 것. =  코드를 절대 보지 말 것.
2. SQL 쿼리도 AI에게 맡길 것.
3. 모든 것을 AI에게 질문할 것.
4. 나는 *비 개발자*라고 생각할 것.

AI로만 모든 걸 해결하겠다는 의지이다. 

 

그리고, 사용 언어 및 라이브러리와 툴들은 내가 사용해 본적 없는 것으로 선택하였다.

사용해본 적이 없는 것으로 개발을 시작한다면 그만큼 조사하고 사용하는데 많은 시간을 투자해야 한다.

하지만 AI만을 이용해 개발하기로 했기 때문에 일부러 잘 모르는 것을 선택해 보았다. 개발 중 오류가 나도 AI에게 질문할 것이다.

• Next.js (React.js)
• Supabase (SQL은 할 줄 알지만, Supabase사용은 처음이다.)

 

시작할 때, 개발 조건을 다음과 같이 설정했다.

1. 디자인은 Shadcn이용해서 "Modern & Simple" 하게.
2. FSD(Feature-Sliced-Design) 패턴 구조에 맞게.
3. 최대한 컴포넌트를 최소화. 분리.
4. supabase에 적용해야할 쿼리는 따로 파일로 작성. (fixup쿼리 포함)
5. `accept edits on` 모드로 해서 무조건 변경된 코드 자동 승인.

Claude Code가 Token을 소모해서 사용된다.

1개의 질문에 1토큰이 아니기 때문에 1시간 정도 사용 시 모든 토큰이 소모되고 4~5시간 후에 토큰이 초기화된다.

따라서, 퇴근 후 하루 1시간 개발을 목표로 진행하였다.

 

프로젝트 제목과 방향성만 제공하고 전체적인 틀(메뉴 및 구성)은 AI에게 맡겼고, 추가적으로 필요할 것 같은 기능은 그때 그때 개발되는 화면을 보면서 요청했다.

 

또한, 이게 토큰을 적게 사용하는 방법인지는 모르지만, 다시 질문하는 일이 없도록 질의는 최대한 내가 원하는 바를 상세하게 했다.

// 질의 예시
이체 내역을 엑셀로 내보낼수 있도록 기능을 추가해줘.
- 이체 내역 페이지에서 버튼 추가.
- xlsx, json 파일 형식 선택 가능.
- 내보낼 이체 내역 기간 선택.
  - 월 단위
  - yyyy-mm-dd ~ yyyy-mm-dd 기간 선택 (단, 최대 1개월)
- 내보내기 할 데이터: 날짜, 구분(지출/수입), 카테고리, 금액, 타이틀, 계좌, 메모
- 아이콘은 제외하고 생성.

 

번역 뿐만 아니라 Supabase 에 대한 설정 조차 `어디서 테이블을 추가할 수 있어?`, `패스워드 초기화 어떻게 해?` 등 다 AI에게 물어봐서 해결했다.

 

---

과연 결과는 어떻게 되었을까.

---

⛳ 결과

• 결과물 github : (현재 Private로 전환해두었습니다.)
• 결과물 : https://daily-money-neon.vercel.app/
  
  • 이메일 인증 없습니다. 이메일 형식만 맞으면 회원가입 가능합니다.
  • 구글 로그인은 기능 구현은 되어 있으나 Supabase에 설정을 안해서 동작 안합니다.

타이틀(Title) 은 내가 폰트 넣어서 직접 진행했다. 

웹/앱 반응형으로 개발되었으며, 디자인은 AI의 취향에서 색상과 그라이데이션만 제거했다.

(자꾸 자주색 + 그라데이션으로 디자인해줘서, 하늘색으로 바꿨다.)

0123456

 

 

💁‍♀️ 느낀점 

나보다 낫네

생각보다 결과물이 잘 나왔다.

번역, 기능, 디자인적으로 조금 부족한 부분은 있지만 내가 원하는 바 큰 동작은 정상적으로 한다. 

(처음부터 120% 완벽하게 프로젝트를 만들고 런칭하는 회사가 어딨겠느냐)

유지 보수 또한 AI에게 맡긴다고 한다면 코드 결과물은 중요한 부분이 아닐테니, 웹 개발에 대한 지식이 없더라도 디자인AI + Claude 조합으로 충분히 원하는 바 구현이 가능할 것 같아 보인다.

또한, 기능에 대한 주석도 잘 적어주고, 테이블 구조가 변경되거나 트리거가 필요하면 그에 맞는 fix-up 쿼리도 작성해줘서 편리했다.

 

입사 후 처음으로 완성한 사이드 프로젝트?!

"사이드 프로젝트 한 번 해보고 싶다" 생각하고 몇 번 시도는 했지만, 리서칭하는데 시간이 너무 소모돼고 처음부터 완벽하게 구조를 잡고 개발하려는 의지가 강해 혼자 너무 고민하다 지쳐서 끝까지 마무리하지 못하고 흐지부지하게 멈춘 프로젝트가 수십 개이다. (시작이 반이라지만)

반면에 AI를 사용하니 내가 직접 검색해 보고 적용해보며 오류를 검사해 볼 필요 없이, AI에게 요구하고 확인만 하면 되기 때문에 개발 속도가 월등히 빨랐다.

코드에 대해 고민할 필요가 없기 때문에 개발하면서 머리가 아프거나 스트레스도 없었다.

 

무서운 AI

AI로 리뷰나 오류 검증하고 질문하는 건 구글링보다 빨라서 편리했는데, 이젠 프로젝트를 거의 완벽하게 만들어준다니, 

개발자 중에 웹 프론트 개발자가 가장 AI에 의해 대체되기 쉬운 분야 같다. ( 아, 내 자리...🤦‍♀️)

보안과 디자인같은 부분을 제외하면 비 개발자도 AI로 사이트하나 뚝딱 가능할 것 같다.

이 프로젝트 끝나자마자, "재밌네 이거, 이참에 앱도 만들어볼까..?"라는 생각이 들었다.

 

💁‍♀️ 아쉬운 부분 

대표 한가지 꼽자면...

컴포넌트의 분리

Form의 경우 하나의 파일로 나왔다. Shadcn을 사용했기에 input, button 등을 각각의 파일로 분리할 필요는 없으나, 

sheet 파일에서는 각 요소의 조합만 했어도 좀더 구조가 간단해 보이지 않을까? 라는 생각을 한다.

Form-Header, Form-Footer와 같은 부분은 변경이 적으니 파일을 분리하고, React.memo로 랩핑하여 재랜더링되지 않도록 한다던지 말이다. 왜냐하면 하나의 파일에 모든 구현부가 있고, dom에 css나 id를 따로 선언하지 않기에 코드에서 해당 컴포넌트를 찾기가 어려웠다.

리팩토링하면서 컴포넌트를 최대한 쪼개달라고 했지만, 디테일하게 요구를 안해서 그런지 원하는 만큼의 코드 결과는 아니었다.

---

번외

Claude Code를 사용하면서 장단점 하나씩 뽑자면

• 장점
  • "~를 하려고하는데 어떻게하면 좋을까?" 라고 질문을 하면 몇 가지 방안을 알려주면서 권장하는 방안과 각 방안별 장단점을 설명해주면서 사용자에게 선택하라고 했다.
    Cursor에서는 겪어보지 못했던 친절함이었다.(내가 Cursor사용을 잘 못하는 걸 수도 있다.)
    
  • Plugin을 추가해서 질의하면 더 좋은 답변을 해준다. (예, frontend-design, server
• 단점
  • 알다시피 Token 소모 속도다. Pro보다 더 높은 단계로 구매하면 되지만... 💸돈... 
  • 왜 자꾸 그라데이션을 넣어서 디자인해주는 건지 모르겠다...

⏱️ 총 개발 기간 및 시간

궁금해서 물어봤다. 총 27시간이다.

4.5h, 5h은 아마도 한번 다 쓰고 초기화되길 기다렸다가 11시쯤 초기화되면 한 번 더 한 것 같다.