안녕하세요. 《Do it! 커서로 시작하는 AI 코딩 입문》 5일 완독 챌린지 2일 차 후기로 돌아온 이지스퍼블리싱 마케터입니다.
👉🏻1일 차 후기는 여기서!
2일 차에는 무얼 공부했는가?
2일 차는 공부를 시작하기 전부터 굉장히 설렜습니다. 왜냐하면 AI 코딩, 프롬프트에 대한 개념을 학습했던 1일 차와는 다르게 직접 커서 프로그램을 활용해 볼 수 있었기 때문입니다. 그렇다고 1일 차가 재미없었다는 건 아닙니다. AI 코딩을 하기 전 꼭 알아 두어야 할 내용들이 설명되어 있어 큰 도움이 되었습니다.
📖 2일 차 커리큘럼
- 커서 살펴보고 개발 환경 준비하기
- 웹 사이트 제작을 위한 기본 개념 다지기(HTML, CSS, 자바스크립트 등)
- 나만의 포트폴리오 웹 사이트 만들기 > 깃허브 페이지로 배포하기
커서를 직접 사용하며 기본 기능을 익혀보자!
커서란?
최근 가장 주목받는 AI 코딩 서비스 커서에 대해 다들 들어보셨을 텐데요. 아마 이 글을 읽어주시는 분들 대다수는 한 번 즈음 사용해 보셨을 것 같네요. 저 같은 초보자도 쉽게 사용할 수 있는 커서는 프로젝트의 전체 맥락을 고려해서 사용자와 함께 문제를 해결해 주는 똑똑한 개발 파트너입니다. 마치 제게는 개발 선생님 같았달까요? ㅎㅎ
이것저것 프롬프트를 입력하고, 어떤 결과를 내놓는지 확인하고, 여러 번 수정도 부탁하며 커서랑 재밌게 노는 것부터 시작을 했습니다.
커서로 처음 만든 것
책에서 AI 패널로 할 일 목록 앱을 만들어 보라고 해서 이렇게 Todo list도 만들어 보았습니다. 프롬프트만 입력하니 1분도 채 안 되는 시간에 이렇게나 멋진(?) 페이지를 만들어 주어서 감격스러웠습니다.
💡한 가지 아쉬운 점이 있었다면, 커서 무료 사용 기간이 14일인 줄 알고 들어갔는데 7일 무료였습니다. 최근에 바뀐 듯합니다.
나만의 포트폴리오 웹 사이트 만들기
웹 개발 기본 개념부터 학습
《Do it! 커서로 시작하는 AI 코딩 입문》이 좋았던 점 중 하나는 커서 활용법뿐만 아니라 웹 사이트 기본 개념까지 상세히 설명하고 있다는 점이었습니다. 웹 사이트를 구성하는 요소를 잘 이해하고 있어야 AI에게 더 구체적으로 요청할 수 있으니까요! 그리고 웹 사이트는 완성된 뒤에도 수정과 개선이 계속된다는 특징이 있는데, 변경되는 코드를 안전하게 관리할 수 있는 도구인 깃과 깃허브 사용법도 알려줍니다.
프롬프트 입력으로 웹 사이트 제작
본격적으로 포트폴리오를 만들어 봅니다. 처음이라 우선 책에 나와있는 프롬프트를 아주 살짝만 변형해서 입력해 보았습니다.
💻입력한 프롬프트
모던한 분위기의 개인 포트폴리오 웹 사이트를 만들어 줘. 색상은 초록이나 노랑 계열이었으면 좋겠어.
- HTML과 CSS, 바닐라 자바스크립트를 사용해 줘.
- PC나 모바일에서 모두 볼 수 있도록 반응형 디자인으로 만들어 줘.
- 필요한 요소는 다음과 같아.
1) 로고와 내비게이션
2) 히어로 이미지
3) 프로젝트 3개 정도, 카드 형태로 나열
4) Contact 폼
이렇게 프롬프트를 입력을 했더니 아래와 같은 이미지를 만들어 주었습니다. 문구는 제가 조금 수정했습니다! 처음에 개발자용 포트폴리오를 만들어 주어서, 커서한테 "나 마케터야. 마케터용으로 좀 바꿔줘"라고 입력했더니 알아서 About Me 부분을 바꿔주더라고요. 완~~전 마음에 들지는 않지만 그래서 맥락에 맞게 문구를 바꿔 주어서 칭찬을 좀 해 줬습니다.
커밋부터 배포까지 완료!
커서로 웹 사이트를 만들어서 친구에게 링크를 공유해 주려고 했는데 문제가 있었습니다. 바로 제 컴퓨터에서 밖에 못 본다는 것. 끝까지 책도 안 읽고 쩔쩔매고 있었는데 배포 관련한 내용이 책에도 모두 설명되어 있더군요. (급한 성질머리ㅎㅎ)
책 내용 따라서 웹 사이트 배포 과정을 살펴보고, 예전에 만들어 둔 깃허브 계정으로 배포를 했습니다. 그렇게 배포한 저의 포트폴리오 페이지 링크를 공유합니다. (저랑 깃허브 팔로잉해요~)
3일 차에는 무엇을 하는가?
웹 사이트를 제대로 만들려면 웹의 구성 요소를 이해하고 웹이 어떻게 동작하는지 알고 있어야 하는데요. 3일 차에는 웹 개발의 기초를 다져보려고 합니다. 웹 동작 원리, 웹 개발 프로세스, 웹 개발에 사용하는 기술 등등을요. 매우매우 어려울 것 같아 걱정이네요!🥲 그래도 웹 앱을 직접 개발해 보려면 이 정도는 기본으로 알아야겠죠?
