홈페이지 제작 1인 사업 준비기

어제는 홈페이지 제작 보강 수업이 있었던 날이었는데 코드를 사용해서 홈페이지를 좀 더 근사하게 보이도록 하는 기능을 연습해 보았습니다. 

사실 수업과 별개로 매주 미션이 있었고, 매주 미션을 수행하는 가운데 배우지 않은 것도 하게 되면서 코드도 먼저 접해보게 되었습니다. 물론 Gemini, Claude, ChatGPT와 같은 생성형 AI를 활용해서 코드를 만들었습니다.

홈페이지 제작을 하면서 처음으로 제대로 생성형 AI를 써보게 되었어요.

 

인공지능이란게 이미 우리 삶 속 깊은 곳까지 들어와 있었지만, 저는 사실 몸소 이런게 바로 인공지능이구나 라는걸 그닥 실감하고 있진 않았었습니다. 인터넷을 바꾸면 으레 따라오는 스피커도 뭐라고 말을 걸면 대답을 해주지만, 엉뚱한 대답을 한다거나, 내가 의도하지 않은 방향으로 해석하는 경우들이 대다수였기에 스피커도 잘 활용하지 않았습니다.

심지어 한동안 ChatGPT로 사진을 애니매이션에 나오는 주인공들처럼 사진을 바꿔주는 것이 유행했을 때조차도 내가 직접 시도해보려는 노력조차 하지 않았어요. 

워낙 많은 사람들이 카톡 프사를 그런 사진들로 바꿀때 어떻게 하는지 궁금해서 남편을 시켰고, 저는 그때조차도 그런 생성형 AI는 저와는 별개의 세상이었습니다.

 

그런데 홈페이지 제작을 하면서 요즘은 매일 생성형 AI와 같이 살고 있다고 해야할 정도로 이런 세상이있구나를 새삼 느끼고 있답니다. 여러분들은 생성형 AI에 대해서 얼마나 알고 있으신가요? 생성형 AI 많이 활용하고 있으신가요?

 

아마 모르시는 분들은 홈페이지 제작을 하는데 생성형 AI를 왜 써? 라는 의문을 가지실 거에요.

저는 제안서 작업, 홈페이지의 문제점 및 개선 방향, 사이트맵, 홈페이지 문구, 색상, 폰트, 이미지, 코드 등등 모든 곳에서 활용하고 있어요.

수업 미션을 수행하다보면 하루에도 수백번 모르는게 생기고, 홈페이지 제작에 오류 덩어리들이 생겨나서 질문할 창구가 필요합니다. 단톡방도 있고, 코치진들도 있어서 질문을 하면 답변을 해주긴 하지만 종종 홀로 전장에 나가있는 듯한 느낌이 들때가 많아 이제는 가급적이면 문제를 스스로 해결하려고 노력한답니다.

이럴때마다 저를 든든하게 지원해주는게 바로 생성형 AI에요.

저는 .ChatGPT, Claude, Gemini 3가지를 주로 쓰는데 각각의 장단점들이 있더라구요.

홈페이지를 만들다보면 이미지가 많이 필요한데 적절한 이미지를 찾지 못한 경우 이미지를 만들어달라는 요청도 많이 하게 된답니다. ChatGPT의 경우엔 사용자가 많아서인지 이미지 생성에 굉장히 오랜 시간이 걸려요. 그리고 결과물도 딱히 마음에 들지 않더라구요.

그리고 Cluade의 경우엔 원하는 의도를 정확히 파악하지 못한 이미지를 생성해줍니다.

이미지 생성에는 그나마 Gemini가 가장 원하는 방향과 흡사한 결과물을 만들어줍니다.

수업을 같이 듣는 수강생들과 동시에 같은 문구를 가지고 이미지 생성 요청을 해보았는데 각각 다른 결과물들을 만들어주더라구요.

그리고 확실히 유료 버전이 무료 버전보다 이미지 퀄리티는 더 좋았습니다.

코드를 짜는데에는  Claude가 가장 잘 짜주었고, 일반적인 문구 생성과 같은 것에는 Gemini가 사용하기 가장 편했습니다.

각자 하고 있는 업무에 따라 여러가지 툴들을 써보시고 가장 적합한 것을 취사선택 하시면 좋을것 같아요.

그래서 제 경우엔 요 3가지를 상황에 따라 돌려가며 쓴답니다.

가장 활용을 많이 하고 있는건  Gemini이고 이것도 코드를 상당히 잘 짜주었어요.

 

오늘은 첫번째 홈페이지 무료 제작 요청하신 의뢰자님의 홈페이지 PC 버전을 완성하였습니다.

첫 제작이다보니, 정말 시행착오가 너무너무 많았습니다.

어젯밤 늦게까지 배운 코드를 활용해 작업을 해놓고 뿌듯한 마음으로 잠자리에 들었는데 오늘 확인해보니 모바일 버전에서 수정한게 PC버전에도 반영되면서 모든 것들이 엉망이 되어 있었습니다.

반응형이라 PC버전을 완벽히 마무리해놓고, 모바일에서 반영이 안된 부분들만 수정을 해서 마무리 했어야 했는데 그걸 미처 알지 못해 대참사가 생겨버린 것이죠.

분명 페이지마다 코드값을 달리해서 넣었는데 다른 페이지에도 똑같은 내용이 적용돼버려서 어떻게 해도 수정이 안되어 한참을 끙끙대었습니다.

이때도 저의 해결사는 강사도, 코치진들도 아니었습니다. 해결사는 바로 Gemini!!

물어본지 몇초만에 답을 내려주었어요. 결론은 적용한 코드에는 아무 문제가 없다는 것!

그래서 혼자 고민해본 결과, 코드끼리 충돌을 줘서 오류가 생긴듯 하여 모든 작업물을 삭제해버렸답니다.

제품 페이지 하나 남았는데 제품 페이지가 다시 원점으로 돌아가버렸죠.

결국 처음부터 다시 시작하여 제작기간 일주일이 넘어서 PC 버전 완성했습니다.

 

의뢰자님께도 PC 버전을 보내드렸고 최종 검토와 수정 작업을 거쳐 PC 버전은 마무리가 되었어요.

전공자도 아닌 제가 처음으로 스스로 홈페이지 제작을 마무리했다는게 너무 뿌듯했습니다.

100% 마음에 드는건 아니지만 그래도 이만하면 첫 시작치곤 잘했다하며 스스로 격려해주는 중이에요.

 

저의 첫 번째 홈페이지 결과물이 궁금하시다면?

sungilhose.imweb.me

요 사이트를 클릭해보시면 됩니다!

 

그런데 도메인 주소가 좀 특이하다는 생각이 드시죠?

저는 홈페이지 제작을 아임웹이라는 웹사이트를 활용하고 있어요.

여러가지 케이스에 맞는 템플릿도 제공해주고, 마땅한 템플릿이 없을 경우 직접 블랭크 템플릿으로 새롭게 제작도 할 수 있답니다.

무료, 유료 버전이 있는데 무료 버전도 아주 훌륭하답니다.

도메인도 주소 뒤 com이나 co.kr과 같은 개인적인 도메인을 구입하지 않고 아임웹에서 제공해주는 것으로 사용할 경우 무료로 쓸 수 있지만 주소 뒤 imweb.me라는 주소가 붙는 제약 사항이 있긴 해요.

그리고 홈페이지 하단에 아임웹으로 제작했다는 문구가 늘 따라붙게 됩니다.

요 2가지는 전혀 개의치 않다, 홈페이지만 있으면 된다 하시는 분들은 이렇게 무료 버전도 훌륭히 활용할 수 있답니다.

 

저의 첫번째 의뢰자님은 이 두가지 제약사항이 크게 문제가 되지 않으신 업종이시라 무료 버전으로 제작해 드렸답니다.

두번째 의뢰자님은 별도의 도메인을 희망하셔서 제가 대신하여 도메인을 구입해 드렸어요.

그리고 홈페이지에서 예약하는 기능도 필요하셔서 스타터 요금제로 가입하기로 하였답니다.

 

첫번째 의뢰자님의 모바일 버전까지 완성하고 나면 바로 두번째 의뢰자님의 홈페이지를 제작할 예정이에요.

세번째 의뢰자님은 기획안 보내드려야 하는 상황인데, 저의 목표는 무료 제작 10개입니다!

그 정도 포트폴리오가 쌓이면 제 사업의 홈페이지를 구축할 수 있겠죠?

 

제 스토리에 홈페이지 완성이 끝날때마다 저의 포트폴리오를 공유해드리겠습니다.

나날이 발전해가는 모습 많이 지켜봐주세요!