Chat GPT로 사이트 UI를 구현해보자 - GPT 웹페이지 구현 100% 활용법

 
 
 
이번에 CRUD가 들어간 간단한  사이트를 하나 만들었는데,
 
디자인은 내 손을 떠난지 오래이다...
 
그래서 나는 Chat GPT를 자주 사용한다.
 
이제 GPT 사용 전후를 보여주겠다.
 
 
 
 
Before - UI 내가 만든 거

 
등록자는 내 이름으로 해버려서 모자이크 처리함
 
 
 
 
 
After - GPT 사용 후

 
 
아직 완성본은 아니지만, 단 1회의 질문으로 받은 화면이다.
 
 
 
 

---

 
 
 
 
 
 
Before 상태에서도 기능은 이미 구현이 끝난 상태이다.
 
유기동물들을 관리하는 사이트를 만들었는데
 
동물 이미지들은 FreePik에서 다운받았음
 
 
 
 
 
이제 GPT에게 제대로 질문하는 방법을 알려주겠다.
 
 
단, GPT에게 만들어달라고 하기 전에, 내가 원하는 게 무엇인지 정확히 알고 있어야 한다.
 
난 일단, 저런 게시판 형태 말고 이렇게 카드 형식의 쇼핑몰 형태로 만들고 싶었다.
 

 
 
내가 원하는 게 모호하다면, 질문 자체가 모호해져버리지 십상이기 떄문에
 
꼭!! 질문 전 내가 정확히 무엇을 원하는지 알고있어야 한다.
 
무작정 만들어줘~ 이러면 쟤도 맘대로 해버린다.
 
 
 
 
 
 
 

 
 
 
카드의 형태는 이렇게 사진을 기준으로 아래에 제목과 내용이 나왔으면 좋겠다.
 
내가 원하는 걸 찾았으면 이제 다 된거라고 보면 된다.
 
 
 
 
 
GPT에게 질문을 보낼 때 아래처럼 구성하여 보내면 끝

원하는 것
내 코드
예상 UI

 
 
 
 
 
 
자.. 그래서 내가 GPT에게 보낸 질문은?
 

아래는 내 유기동물 임보 사이트 코드야.
현재는 기본 게시판처럼 글만 보이게 되어있는데 이걸 좀더 쇼핑몰 형태로 UI를 변경하고 싶어.
사이트의 네비게이션 아래에는 검색바가 있고,
그 아래에는 글들이 한줄에 3개씩 박스 형태로 나오게 하고싶어. 
화면에 꽉차도록 코드를 작성해줘.


(========내 코드 삽입=========)


==============================
네비게이션 바
==============================
검색바
==============================
---------------   -----------------   -----------------
|  (게시글 1)  |   |  (게시글 2)   |   |   (게시글 3)   |
|    사진      |   |    사진       |   |     사진       |
|------------- |  |---------------|   |----------------|
|    제목      |   |     제목      |   |      제목      |
|    내용      |   |      내용     |   |      내용      |
---------------    ---------------     ----------------
---------------   -----------------   -----------------
|  (게시글 4)  |   |  (게시글 5)   |   |   (게시글 6)   |
|    사진      |   |    사진       |   |     사진       |
|------------- |  |---------------|   |----------------|
|    제목      |   |     제목      |   |      제목      |
|    내용      |   |      내용     |   |      내용      |
---------------    ---------------     ----------------

 
 
아래에 예상 UI를 그려서 주면 훨~씬 잘 만들어준다!
 
기능 구현이 완료된 내 게시판 페이지 코드를 통째로 복붙해서 줬더니 데이터 매핑까지 알아서 다 해줌
 
하지만 GPT에게 코드를 보여주면 외부 유출 가능성이 높으니
 
회사나 학교 프로젝트 코드면 코드 넣기는 비추한다.
 
 
 
질문이 디테일할수록, GPT가 한 번에 정확한 답을 주기 때문에 오류가 발생활 확률이 낮아진다.
 
처음 답을 받고, 코드를 적용해본 뒤
 
~버튼 오른쪽으로 이동시켜줘. ~테두리 생성해줘. 푸터 만들어줘. 등등 연속 질문을 하면
 
보다 질 높은 UI를 생성해낼 수 있을 것이다.
 
 
 
 

 
 
같은 방식으로 질문하여 GPT에게 받은 로그인 화면이다.
 

 

 
 
 

 
 
 

 
메인 화면은 최종적으로 이렇게 완성!
 

디자인 중에 내가 직접 코드를 짠 부분은 없다.

 

모두 GPT에게 시켜서 한 것이다.

 

페이지 버튼을 만들 때에도, 아주 상세하게 질문했던 기억이 난다.

페이징을 구현할건데 디자인은 이렇게 하고싶어.
모든 버튼은 약간 둥글게 할 거고 이전 버튼과 다음 버튼은 #FFD8D8 배경에 검정 글씨로 할 거야.
페이지 숫자 버튼은 흰색에 #FFD8D8 테두리에 검정글씨야.
현재 페이지는 #FF6699 배경에 흰색 글씨로 하고싶어.

{이전 버튼}, {페이지 숫자 버튼}, {다음 버튼}

(=========내 코드 삽입=========)

 

 

 

 

1. 본인이 원하는 요구사항을 정확히 알고나서 질문해라.
2. 한꺼번에 많은 질문을 하기보다 작은 기능 하나씩 질문하며 기능을 추가해나가자.
3. 디자인 요구사항 없이 백엔드 개발부터 시키고 나서 백엔드 코드에 디자인을 요구하자.

 

 

 
그럼 모두 GPT를 사용하여 즐코하도록~