나만의 커뮤니티 게시판 만들기

01 먼저 개발에 필요한 커뮤니티 하나 준비합니다.

 

02 이 상태에서 커서에세 Sequential Thinking을 이용하여 커뮤니티 게시판 설계를 부탁합니다. 이때 커서가 참고할 수 있도록 레딧의 화면을 캠처하여 이미지 파일로 프롬프트를 포함시켜 줍니다. 이미지 파일을 채팅방에 Ctrl + C하여 Ctrl + V 하면 대화 세션에 추가될 것입니다. 그리고 커서에게 만들고자 하는 커뮤니티 게시판의 사용 기술과 기능을 구체적으로 나열해줍니다.

sequential thinking으로 이런 디자인의 커뮤니티 게시판을 하나 개발하려는데 같이 고민해줘. 고민 단계는 5단계까지만 해. 기술은 next.js, tailwindcss와 supabase를 이용하려고 해. 이때 supabase는 supabase MCP로 모두 세팅하고 연결할 거야. 게시판의 기능은 회원가입, 로그인, 로그아웃(구글 로그인과 같은 OAuth는 추가하지 않음), 글쓰기, 글 수정, 글 삭제, 댓글, 좋아요, 싫어요, 글 검색 기능, 내 정보 페이지 기능이 있으면 좋겠어. 그 외의 기능은 필요하지 않아.

 

커서가 요청에 따라 Sequential Thinking으로 게시판 개발 설계를 시작합니다. 커서는 이 작업은 보통 5단계 이상으로 나누어서 진행하려고 하지만, 그러면 실습 기간이 너무 오래 걸리므로 여기서는 5단계로 제한했습니다. 각 단계를 따라가며 상세한 내용이 궁금하다면 열어서 참고할 수 있습니다. 다만, 여기서는 커서가 설계만 하고 코드 생성은 하지 않으니, 단계를 살펴보면서 [Run tool]을 눌러서 설계를 끝까지 진행합니다.

 

03 설계가 끝나면 커서에게 개발을 하라고 지시하면 됩니다. 몇 차례 커서가 '이대로 할까요?'라는 질문을 한 다음 대기할 수 있습니다. 그럴 때마다 '그렇게 해'라고 하며 실행하게 합니다.

 

04 터미넣에 'Would you like to use Turbopack...'이라는 질문이 나올 때마다 Enter를 눌러 진행합니다.

 

05 다음으로 나오는 실행에 대해서는 모두 [Run]이나 [Keep]을 눌러 진행하면 됩니다. 개발 끝까지 이 기조를 유지하면서  진행합니다.

 

06 개발 과정 중간에 커서가 수파베이스 세팅에 대해 물어볼 떄가 있을 겁니다. 이때 새 프로젝트를 만들어 진행해달라고 하면 됩니다. 이 과정을 진행한 다음에는 수파베이스에 접속해서 실제로 프로젝트가 생성되었는지 확인하기 바랍니다.

 

07 수파베이스에 프로젝트가 잘 생성된 것을 확인했다면 다음으로 테이블을 생성할 것입니다. 테이블이 생성된 이후에는 수파베이스에 접속해서 실제로 잘 생성되었는지 확인합니다. 프로젝트를 누르고 왼쪽 메뉴에서 [Table Editor]를 누른 다음 게시판 서비스에 필요한 테이블이 생성되었는지 확인합니다. 여기에서는 댓글(comments), 좋아요(likes), 포스트(posts)와 프로필(profiles) 테이블이 생성되었습니다.

 

08 다음과 같이 커서가 필수 기능 구현이 끝나고 배포를 도와주겠다는 메시지를 띄우면 기능이 잘 구축되어 개발은 끝난 상태입니다.

 

09 실제로 배포하기 전에 개발이 잘 되었는지 확인하기 위해 로컬 환경에서 게시판을 실행해보라고 하겠습니다. 실습 과정에서 테스트를 위해 실행해봤더니 실제로 엉뚱한 화면이 나왔습니다. 이런 경우가 종종 발생하므로, 배포 전에 이상이 없는지 꼼꼼히 확인한 후 진행해야 합니다.

 

10 예상과 다른 화면이 나타날 경우, 그 화면을 캡처해서 커서에 첨부합니다. 여기서는 게시판이 안 보이고 Next.js 화면이 보이는 것을 커서에게 나온다고 했더니 제대로 화면이 보이게 수정했습니다. 하지만 화면을 살펴보니 한 가지 문제가 발생한 것을 확인할 수 있습니다.

게시판 화면이 안 보이고 화면이 보이는데? 게시판 사이트인데 Next.js 화면을 보여줄 수는 없다고 생각해.

 

11 화면에 로그인, 회원가입 등 메뉴가 전혀 표시되지 않았습니다. 배포를 하지 않고 로컬에서 테스트를 한 이유도 바로 이러한 문제 때문입니다. 이제부터가 진정한 바이브 코딩의 시작입니다. 화면을 캡처한 다음 커서에게 필요한 기능을 보이게 해달라고 하면 됩니다.

분명히 나는 로그인, 로그아웃, 회원가입, 프로필 기능과 같은 것을 개발해달라고 했는데 메뉴에 하나도 안 보여.

 

12 개발 중 오류가 발생하면, 배운대로 오류 메시지를 복사해서 커서에 전달합니다. 그러면 커서가 오류 원인을 분석해서 해결해줄 것입니다. 이 과정을 반복하면서 원하는 기능이 잘 동작하는 상태까지 나아갑니다.

 

13 완성된 커뮤니티 게시판의 기본 기능을 점검합니다. 로그인, 회원가입, 로그아웃부터 글쓰기, 댓글 달기 등의 기능이 잘 동작하는지 확인했습니다. 참고로 수파베이스의 회원가입 기능은 반드시 이메일 인증을 하도록 설정되어 있습니다. 따라서 회원가입은 실제로 가지고 있는 이메일로 진행해야 합니다.

 

14 이후 기능 완성은 바이브 코딩 방식으로 커서와 티카타카하며서 완성해내가야 합니다. 완성까지 여러 번 티카티카를 주고받으며 다음어가는 것이 핵심입니다. 다음은 실제로 실습에서 요청한 내용들입니다. 특별한 기술 없이도 할 수 있습니다.

 

15 레딧처럼 구성된 커뮤니티 사이트를 만들었습니다.