html, css 틀 잡기 - 1
틀 잡기
이전에 다른 수업들을 통해 만든 웹사이트 코드를 기반으로 유사하게 웹사이트를 만들려고 했다. 그러나 정확한 개념공부 없이 응용만 하려고 하니 벽이 느껴졌다. 기본 디자인을 바탕으로 헤더를 만들고, 스프레드시트가 엠베드 될 박스도 만들었다.
ChatGPT 찍먹
오늘 다시 건드리려다 혹시나 하는 마음에 ChatGPT을 테스트해보기로 했다.
우선 ChatGPT에게 내 디자인으로 코드를 만들어줄 수 있는지 물었다. 아직 이미지 인식이 안되어 설명을 하라고 한다.
헤더를 한번 설명해봤다. 피그마에 적힌 수치를 바탕으로 헤더와 버튼을 설명하니 정말 놀랍게도 내가 기존에 만든 헤더와 똑같은 헤더를 만드는 코드를 제공했다.
심지어 코드를 설명해준다. 혼자서 만드는 데에 1시간 정도 걸린 헤더를, 프롬프트만 정확히 입력하니 똑같은 결과가 5분 만에 나왔다.
잘했으니 칭찬도 해줬다.
그 다음도 설명해봤다. 작성하면서 프롬프트를 얼마나 자세하게 작성해야 할까 의문이 들었다. 기본 CSS지식이 없어서 수치도 없이 간략하게 적어도 ‘알아서’ 잘 만들어줄까 싶다.
안타깝게도, 중간 정렬해야 하는 것을 빼니까 다른 코드가 나왔다. 수정하려고 하니 개인적으로 적은 코드와 ChatGPT가 적은 코드들이 뒤섞여 골치 아프게 되었다.
결론
- 아예 처음부터 ChatGPT로 만들 수 있을 것 같은데, 이후에 수정하려면 코드를 읽을 줄 알아야 하고, 그럼 개발지식이 결국 있어야 한다.
- ChatGPT가 무료 버전이라 답장하는데 오래 걸린다. 월 $20은 만만치 않은데…
- 다른 강의에서 사용한 코드와 형태가 다르다. 무료 ChatGPT가 2020년에 멈춰있어서 그런지, 이 방법이 더 효율적인지 모르겠다.
- 개발과 별개로 디자인이 너무 구려서 할 맛이 나지 않는다. 디자인 공부도 병행해야 하나 싶다.