[AI] ChatGPT로 웹사이트 만들기 1편: 화면 만들기
ChatGPT로 웹사이트 만들기
웹사이트를 만들기 위해서는 어떤 정보를 보여줄지 정하고 화면을 구성한 다음 버튼이나 검색 같은 기능을 직접 구현해야 한다.
간단한 대시보드라고 해도 프런트엔드 환경을 구성하고 화면 크기에 따라 레이아웃이 바뀌도록 만들어야 하기 때문에 개발 경험이 없다면 시작하기가 쉽지 않다.
ChatGPT의 Sites를 사용하면 만들고 싶은 화면과 기능을 대화로 설명하고 그 결과를 바로 확인할 수 있다. 처음부터 완성된 결과를 만드는 방식이라기보다 화면을 생성한 다음 필요한 부분을 계속 수정해 나가는 방식이다.
이번에는 팀의 업무 진행 상황을 확인할 수 있는 간단한 대시보드를 만들어보려고 한다.
첫 화면 만들기
Sites에서 화면을 만들 때는 단순히 업무 대시보드를 만들어줘라고 요청하는 것보다 화면에서 확인하고 싶은 정보를 같이 적어주는 것이 좋다.
예를 들어 업무 현황을 확인하는 화면이라면 전체 업무 수, 완료된 업무 수, 상태별 비율과 같은 정보가 필요하다.
팀 업무 진행 상황을 확인할 수 있는 대시보드를 만들어줘.
상단에는 전체 업무 수, 완료된 업무 수와 완료율을 보여줘.
가운데에는 상태별 업무 비율과 담당자별 업무량을 차트로 보여줘.
하단에는 업무명, 담당자와 상태를 확인할 수 있는 목록을 만들어줘.
담당자 이름으로 검색할 수 있게 하고
상태를 선택하면 해당 업무만 조회할 수 있게 만들어줘.
모바일에서는 차트와 목록이 세로로 배치되도록 해줘.
요청을 전달하면 Sites가 설명한 내용을 바탕으로 화면을 생성한다.
이때 차트의 종류나 정확한 색상까지 처음부터 모두 정할 필요는 없다. 우선 필요한 정보와 기능을 작성하고 생성된 화면을 보면서 수정하는 편이 이해하기 쉽다.
생성된 화면 확인
첫 번째로 만들어진 화면은 완성된 웹사이트가 아니라 초안에 가깝다.
화면이 만들어지면 디자인보다 요청한 기능이 제대로 동작하는지 먼저 확인한다.
- 검색어를 입력했을 때 목록이 변경되는지
- 상태를 선택하면 해당 데이터만 나오는지
- 필터를 해제하면 전체 목록으로 돌아오는지
- 데이터가 없을 때 빈 화면이 정상적으로 표시되는지
- 모바일 크기에서 화면이 겹치지 않는지
예를 들어 상태별 차트를 눌렀는데 차트만 변경되고 아래 업무 목록은 그대로라면 다음과 같이 수정할 수 있다.
상태별 차트를 선택하면 아래 업무 목록도 같은 상태로 필터링되게 수정해줘.
필터를 다시 선택하면 전체 목록으로 돌아오게 하고
기존 화면의 색상과 배치는 유지해줘.
수정할 부분과 유지할 부분을 같이 작성하면 이미 잘 만들어진 영역까지 바뀌는 것을 줄일 수 있다.
화면 수정하기
화면을 수정할 때 여러 기능을 한꺼번에 변경하면 어떤 요청 때문에 문제가 발생했는지 확인하기 어렵다.
그렇기 때문에 화면 배치, 기능, 문구처럼 비슷한 작업끼리 나누어 요청하는 것이 좋다.
상태별 차트의 크기를 조금 키워줘.
범례와 차트 사이의 간격은 줄이고
아래 업무 목록의 크기와 배치는 그대로 유지해줘.
문구를 변경할 때는 기존 문구와 변경할 문구를 함께 전달할 수 있다.
안내 문구를 변경해줘.
기존:
상태를 클릭해 필터링하고 한 번 더 누르면 해제할 수 있어요.
변경:
상태를 선택해 필요한 업무만 확인할 수 있어요.
이런 방식으로 요청하면 전체 화면을 다시 만들지 않고 원하는 부분만 계속 수정할 수 있다.
버전 저장과 배포
화면을 만들고 수정이 끝나면 현재 결과를 버전으로 저장할 수 있다.
버전 저장은 검토할 결과를 남기는 과정이고 배포는 실제 방문자가 접속할 수 있는 상태로 만드는 과정이다.
첫 화면 생성
→ 기능 확인
→ 화면 수정
→ 버전 저장
→ 공개 범위 확인
→ 배포
배포 전에는 사이트를 누가 볼 수 있는지 확인해야 한다. 업무용 화면이라면 특정 사용자나 워크스페이스에만 공유할 수 있고 외부에 공개할 사이트라면 인터넷 공개 범위를 사용할 수 있다.
화면에 내부 문서 주소나 개인정보가 들어 있지 않은지도 함께 확인한다. 테스트 데이터라고 생각하고 넣었던 이름이나 연락처가 그대로 배포되는 경우가 있기 때문이다.
마무리
Sites를 사용하면 웹사이트의 목적과 필요한 기능을 설명하고 생성된 결과를 보면서 화면을 만들 수 있다.
처음부터 디자인과 기능을 모두 결정하기보다 필요한 정보와 기본 동작부터 만든 다음 하나씩 수정하는 것이 좋다.
이번에는 예시 데이터를 사용해 업무 현황 화면을 만들었다. 다음 편에서는 Google Sheets에서 관리하는 데이터를 연결해 화면에 실제 데이터를 표시해보려고 한다.
Leave a comment