회원이 가입하고 글을 올리는 사이트를 AI와 함께 만든다면, 이미 갖춰진 기본 기능을 바탕으로 필요한 부분부터 구체화할 수 있습니다. 그누보드5는 게시판과 회원 관리 기능을 제공하는 공개 CMS입니다. 새 사이트의 첫 화면뿐 아니라 회원과 게시물을 계속 관리할 기반까지 생각할 때 출발점으로 살펴볼 수 있습니다.
여기서 바이브코딩은 원하는 동작을 자연어로 설명하고, AI가 제안한 코드를 확인·수정하며 사이트를 만들어 가는 작업을 뜻합니다. 운영자는 만들고 싶은 모습을 구체화하고 사용 결과를 확인하며, 기술 담당자는 변경 내용과 적용 방법을 검토합니다. 역할을 이렇게 나누면 첫 작업의 범위를 잡기 쉽습니다.
기본 기능에서 우리 사이트에 맞출 부분 찾기
가상의 동호회가 그누보드5로 회원과 공지 게시판을 운영한다고 해보겠습니다. 이번에 바꾸고 싶은 것은 모바일 공지 목록입니다. 제목이 길면 중요한 단어가 잘리고 작성일과 제목이 가까워 읽기 어려운 상황을 가정합니다. 회원가입이나 글쓰기 방식을 새로 만들기보다 공지를 찾고 읽는 부분에 집중할 수 있습니다.
운영자가 처음 정할 것은 색상보다 이용자가 끝내야 할 행동입니다. 이 경우에는 ‘휴대전화에서 공지 제목을 구별하고 원하는 글을 연다’가 됩니다. 제목을 모두 펼칠지, 두 줄까지 보여줄지, 날짜를 어느 위치에 둘지는 그 행동을 돕는 선택입니다. 공지의 중요도를 표시하려고 글 순서를 바꾸는 일은 별도 요구이므로 이번 범위에 포함할지 먼저 정합니다.
기본 기능을 활용한다는 뜻은 현재 설치된 사이트의 기능을 모두 그대로 쓸 수 있다고 가정하는 것이 아닙니다. 사용 버전과 스킨, 추가 기능, 이미 수정한 부분이 다르면 출발점도 다릅니다. 기존 사이트를 다룰 때는 현재 상태를 기술 담당자와 함께 확인한 뒤 변경 범위를 정하면 됩니다.
실제 화면과 유지할 동작을 함께 설명합니다
AI에게 “모바일에서 예쁘게 바꿔줘”라고 요청하면 원하는 결과를 비교하기가 어렵습니다. 화면의 어느 부분을 바꾸고 무엇을 유지할지 나누면 초안을 보고 의견을 줄 기준이 생깁니다.
모바일 공지 목록에서 긴 제목을 두 줄까지 읽을 수 있게 하고, 작성일은 제목 아래에 배치하고 싶습니다. 기존 글과 읽기 권한, 검색과 페이지 이동은 유지해 주세요. 현재 화면과 사용 버전을 바탕으로 바꿀 범위와 확인할 항목부터 설명해 주세요.
이것은 요청 문구 예시입니다. 두 줄 배치가 모든 게시판에 적합하다는 뜻은 아닙니다. 공지가 대부분 짧거나 날짜별로 찾는 이용자가 많다면 다른 배치가 더 편할 수 있습니다. 초안을 볼 때에는 무엇이 더 잘 읽히는지뿐 아니라 한 화면에서 볼 수 있는 글 수가 어떻게 달라지는지도 살펴봅니다.
그누보드5의 공개 소스를 바탕으로 기술 담당자가 실제 사용 파일과 변경 이력을 확인해 관련 부분을 AI 작업에 제공하면 현재 구현을 기준으로 논의할 수 있습니다. 사이트 주소만 알려주는 것과 실제 구현 자료를 제공하는 것은 다릅니다. 비밀번호나 회원 정보를 넘길 필요는 없으며, 요청에 필요한 코드와 익명화한 시험 자료를 구분합니다.
초안에 의견을 줄 때는 같은 공지로 비교합니다
가상 동호회의 시험용 공지를 짧은 제목, 긴 제목, 날짜가 다른 글로 준비해 보겠습니다. 첫 초안에서 긴 제목은 잘 읽히지만 제목과 날짜의 간격이 너무 넓어졌다면 “간격을 줄여줘”라는 요청에 어떤 화면에서 느낀 문제인지 함께 적을 수 있습니다. 좁은 화면에서 글이 세 줄로 늘어났다면 화면 폭과 해당 제목을 제시합니다.
이때마다 공지의 내용과 개수를 바꾸면 디자인 변경의 효과를 비교하기 어렵습니다. 같은 자료와 화면 조건을 유지하면서 한 가지씩 조정하는 편이 의견을 구체화하기 좋습니다. 바뀐 모습을 캡처해 두면 기술 담당자도 어느 초안을 기준으로 검토해야 하는지 알 수 있습니다.
제목이 두 줄로 보인다는 사실과 그 제목을 눌렀을 때 올바른 글이 열리는지는 각각 확인합니다. 손가락으로 누르기 편한지, 검색 결과에서도 같은 배치가 유지되는지, 검색 결과가 없을 때와 다음 페이지로 넘어간 뒤에도 목록이 자연스럽게 보이는지를 같은 공지로 따라가 봅니다. 검색어나 분류를 선택했다면 페이지를 옮긴 뒤에도 그 조건이 유지되는지 살펴봅니다.
기존 이용 과정까지 확인하며 적용합니다
화면의 차이를 확인한 뒤에는 회원과 비회원이 볼 수 있는 글의 범위를 대조합니다. 목록에서 감춰졌어도 주소로 직접 열었을 때의 권한은 별도로 확인할 대상입니다. 이 검토는 ‘권한을 유지해 달라’는 요청을 적었다는 사실로 대신하지 않습니다. 기술 담당자가 실제 권한 처리와 변경 파일을 살피고, 운영자는 허용된 이용 과정이 이어지는지 확인하는 방식입니다.
운영 사이트에 적용하기 전에는 시험 환경에서 확인한 변경 파일과 이전 상태로 돌릴 방법을 정합니다. 게시판 목록을 고치는 과정에서 회원 처리나 공통 기능까지 바뀌었다면 그 이유와 영향을 기술 담당자에게 설명받습니다. AI가 넓은 범위의 파일을 제안했다는 이유만으로 모두 적용할 필요는 없습니다.
적용 뒤에도 같은 시험용 공지로 목록·검색·페이지 이동을 한 번 더 확인하면 됩니다. 변경한 내용과 확인 결과를 남겨 두면 다음 업데이트나 다른 담당자의 수정에서도 출발점을 알 수 있습니다. 실제 데이터를 넣거나 서버에 반영하는 작업은 권한과 운영 절차를 갖춘 담당자가 수행합니다.
처음부터 사이트 전체를 AI에게 맡기기보다 자주 쓰는 화면 하나를 고르면, 원하는 동작을 설명하고 초안을 비교하는 경험을 쌓을 수 있습니다. 그누보드5의 기본 기능을 바탕으로 공지 목록에서 시작했다면, 다음 작업도 이용자가 자주 쓰는 부분에서 고르면 됩니다. 공식 자료는 그누보드5에서 살펴볼 수 있습니다.