챗GPT, 개발 공부에 있어서 든든한 친구 같은 존재이죠. 내일배움캠프의 수강생들도 혼자 공부할 때에는 챗GPT의 도움을 받고 있는데요. 오늘은 내일배움캠프 수료생들의 챗GPT 경험담을 보고, 여러분의 개발 공부에 적용해봅시다.
최종 프로젝트에서는 화면 구성 까지를 목표로 했습니다. 이를 위해 설계 단계에서 Figma로 상세하게 와이어프레임을 적어나갔습니다. 근데 막상 개발하려보니 CSS에서 굉장히 막혔는데요. 백엔드 파트를 공부하다보니 기초 프로그래밍(HTML, CSS, JS)을 배웠어도 후반 즈음 가니까 되게 헷갈리더라고요. 그 중 가장 많이 잊어먹은게 CSS 입니다 하하 가운데 정렬하는게 왜 그렇게 어려운 건지!
백엔드에서도 할 게 굉장히 많은데, 백엔드 5명이 CSS나 프론트 쪽에서 같이 매달리기엔 시간이 아까웠습니다. 그래서 저희 팀은 GPT를 적극적으로 활용해서 프론트를 완성해보자고 했습니다.
챗GPT로 프론트엔드 구성하기
GPT가 많이 똑똑해서 프론트엔드를 구성하는 건 어렵지 않습니다. 와이어 프레임을 열심히 만들었다면 와이어 프레임을 스크린샷 한 후에 GPT에 업로드하고 아래와 같이 입력하면 됩니다. 참고로 사진 업로드는 GPT 유료버전에서만 가능합니다.
GPT는 사진을 보고 HTML 코드 및 CSS 를 작성해서 사용자에게 보내줍니다. 결과물을 봤을때 엄청 똑같이 만들어주지는 않지만, 그래도 거의 유사한 작업물을 확인 할 수 있습니다. 그 후에는 계속해서 원하는 방향으로 수정하게끔 보냈습니다.
예를 들어, ‘카테고리 적혀져 있는 부분 마우스 올렸을 때 이런이런 색깔로 변하게 해줘, 그리고 클릭 했을 때도 유지되게 해줘’, ‘검색란에 검색 버튼이 상하정렬이 안돼있어 더 정확히 가운데에 오게 만들어줘’ 등을 요청했습니다.
그렇게 해서 완성 된 화면인데 참 만족스러웠습니다. 작업 도중 가끔 요구사항이 바뀌어서 완벽히 일치하지 않지만 정말 깨끗한 화면을 볼 수 있었습니다.
챗GPT로 CSS 파일 관리와 유지 보수 할 때 발생하는 어려움
사실 모든 걸 GPT가 대신 해줄 수는 없습니다. 저도 CSS 공부를 다시 하고 조금씩 손을 보기는 했지만, 그래도 프론트에 들어가는 시간을 확 줄여준 것은 사실입니다. 결국 최종 프로젝트의 프론트 CSS 작업은 GPT라는 멤버가 60~70% 정도는 대신 해주어서 만족스러운 화면을 사용자에게 보여줄 수 있었습니다.
하지만 아쉬웠던 점이 있습니다. GPT에게 물어볼 때마다 모듈화를 안 하고 계속 Class 를 정의하고 CSS 파일에 추가하여 CSS 파일이 정말 방대해졌습니다. 이 때문에 CSS 수정사항이 생길 때마다 몇 천 줄이 넘는 CSS 파일을 뒤적거리느라 고생 했었습니다.
다시 물어본다면 유지보수하기 쉽게 기존 코드를 보면서 거의 동일한 부분은 하나로 할 수 있게 수정해주고, 새롭게 추가할 CSS는 기존 코드에서 비슷한 부분이 있으면 기존 코드에 class만 추가하는 식으로 CSS 작업을 해달라고 요청할 것 같습니다.
내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다
내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.
CREDIT
글 | 조원호 내일배움캠프 수료생
편집 | 정효재 팀스파르타 에디터
취업 준비, 어디서부터 시작해야 할지 모르겠다면?
🧐비전공자인데 IT 업계 취업할 수 있을까?
😟프로젝트 경험이 부족한데, 어떻게 준비해야 할까?
🥺IT 기업으로 이직하고 싶은데 뭐부터 시작해야 할까?
이런 고민을 하고 있다면, 내일배움캠프의 IT 취업 컨설팅을 받아보세요.
취업 코칭 전문가들이 여러분의 고민을 해결해 드립니다.
다음 링크에 이메일을 입력하시면 메일로 1:1 커리어 상담권과 취준 자료집을 보내드릴게요.
Share article
Subscribe to our newsletter