바람의나라 신고 사이트 제작후기 feat. prisma & supabase 프리즈마 스키마 세팅 및 수파베이스 첫 사용. 클로드 ai 사용후기.

개발공부를 해야겠다 싶어서, 이번에 핫하다는 ai 를 사용해 간단한 사이트 하나를 만들어보려고 했다.
ai는 클로드가 괜찮은것 같아 선택했고, 커서 ai도 한번 사용해보기로 했다.

1. 클로드야, 나 이런거 만들거야.

일단 사이트의 컨셉을 설명한다.

게임을 하고있는데, 사기꾼 아이디와 비매너 아이디를 등록하고 조회할 수 있는 사이트가 필요해.
next.js 로 페이지를 만들고 싶어. 유저는 사기꾼을 등록 할 수 있고, 등록 시 본인의 아이디도 입력해야 해.
등록할때는 카테고리를 설정할 수 있어. 카테고리는 '사기', '비매너' 가 있어.
사기꾼을 등록할때 모든 유저는 목록에서 아이디를 검색할 수 있어야해.
최신 등록한 아이디가 최 상단으로 노출되고, 넘버링을 해줘.
이 사이트는 구글아이디로 로그인을 할 수 있고, 관리자만이 등록된 아이디를 삭제할 수 있어.
삭제 버튼은 관리자에게만 노출 돼. 로그인 기능을 제공하지만, 목록에서 검색할 수 있는 기능은 로그인을 하지 않아도 이용할 수 있어. 하지만 등록은 로그인 이용자만 할 수 있어.

초기 컨셉은 이런식으로 대강 생각나는대로 정했다 (물론 중간에 아주 많은 첨삭과 수정이 이루어짐)

Next.js의 tsx를 던져주고, 데이터 연동이 필요하다면서 Prisma scheme를 대강 짜준다.

 

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  isAdmin   Boolean  @default(false)
  reports   Report[]
}

model Report {
  id          String   @id @default(cuid())
  scammerName String
  reporterName String
  category    String
  description String
  createdAt   DateTime @default(now())
  reporter    User     @relation(fields: [reporterId], references: [id])
  reporterId  String
}

 

2. 데이터베이스 연동하는 방법을 자세히 물어보았다

PostgreSQL 데이터베이스 설치하고, 설정하는 방법을 아주 자세히 알려준다. env 파일 설정이랑, 어떻게 작성하는지, 어디에 파일을 둬야 하는지, 터미널에 어떤 명령어를 작성해야하는지를 OS별로 알려준다.

나는 macOS를 사용하니 brew로 작업을 했다.
(brew로 작업하는 방법또한 자세히 알려준다.) 

 

3. 클로드는 가끔 엉뚱한걸 알려주거나, 코드가 수정되면 기존 코드를 날려먹는 특징이 있다.

Next15에서 코드를 잘 짜주다가, 갑자기 pages가 등장하길래, next15 app router 환경으로 다시 코드를 작성해달라고 여러번 수정요청을 했다. 그리고 오답을 제시하거나, 타입문제를 잘 해결하지 못할때가 있었다. 그럴때마다 구글링을 해야했고, (구글신이 다 알려줌) 문제해결하는데는 크게 어렵지 않았다. 

그래도 에러를 던져주면, 잘 해석해주고 해결방법을 알려준다. 
대부분의 에러가 타입이슈였다. 애초에 타입스크립트로 작성해달라고하면 문제가 안될지도 모르겠다. 

 

4. UI의 아주 마이크로한 디테일은 잘 잡지 못하지만, 전반적인 디자인은 생각보다 잘 잡아준다.

새로운 명령을 할때마다 UI가 추가되고, 레이아웃이 틀어진다.
기본적으로 tailwind 기반으로 코드를 짜주기때문에 수정하는데 어렵지는 않았다.
명령 한스택 한스택이 소중하므로, UI관련해서는 기본 틀만 짜달라그러고 컬러나 디테일한것들은 직접수정하는게 나을것같다.

기대한것보다는 괜찮은 디자인이 나왔다. 클로드...좀 괜찮을지도?

 

5. 절차에 대한 설명이 상당히 정확하다

auth 연동하는 방법이나, 수파베이스에 연동하는 방법 등을 물어보면, 절차별로 아주 자세히 설명해준다. 여기서 이해가 되지 않는 부분이 있다면, 다시 재질문 하면 된다. 정확하게 어디에서 헤매고 콕 찝어 알려준다. 상당히 똑똑하다고 느꼈다.

 

6. 기획이 바뀌는대로 수정 요청을 해도, 잘 적용해준다.

코드도 잘 돌아간다.

 

7. 다양한 문제해결 방향 제시

프로젝트 코드에서 category 라는 항목을 전부 제거했는데, 타입을 계속 참조하고 있었다. (타입도 바꿨음)
문제를 찾아달라고 요청했지만 계속 타입에러가 발생했고, 하라는대로 해도 해결이 되지 않아 여러번 되물었다.

같은 에러로 질문을 3스택정도 쌓았더니, 그래도 해결이 안돼? 하면서 더 다양한 해결책을 제시해줬다. 결국 해결!

이 오류는 캐시문제였다..

 

8. 개발 지식 없이 기획자가 대화형만으로 사이트 개발이 가능할까?

불가능하다. 변경된 코드를 확인하고, 이렇게 변경했을때 어디가 문제가 될지 파악할 수 있을 정도의 개발지식은 필요할것이다.
그리고 환경에 대한 이해도 있어야 할 것이다. 하지만, 어떻게 하는지 모른다고 말하면 클로드가 다 알려주기 때문에, 아주 약간의 지식만 있어도 만들수는 있을 것 같다.

아 코드 제대로 안짜냐?

누가 마음대로 누락시키래?

 

9. 문제가 될 법한것을 대강 설명해줘도, 찰떡같이 알아듣는다.

그에 대한 다양한 해결책도 마련해준다.

 

10. UI 보강

잘만들어준다

 

클로드만으로 만든 완성된 베타버전 사이트.
내가 한거라곤

1. 대충 기획
2. 클로드에게 코드짜라고 명령
3. Auth 연결, DB연결 (postGQL 쓰다가 supabase 연결) 
4. UI 조금 수정

이것이 전부다. 클로드 유료 버전 (3.5를 사용했고)
제작하는데 이틀 걸렸다. (하루에 4시간?)

근데 처음부터 내가 다짜도 열심히 만들면 이틀이면 만들거같긴 함.. 그래도 안써본 클로드 ai, supabase연동, prisma 스키마 설정 등을 해봤다는것에 의미를 둔다.

딸깍으로 개발하는 시대..온다...

 

https://baram-scammer.vercel.app/

게임 사기꾼/비매너 신고 사이트입니다