노코드 툴인 Webflow를 사용하여 웹 사이트를 만들어보았다.
강아지가 상담해주는 사이트 퍼피마인드를 제작을 통해 노코드 툴을 배워보았습니다.

노코드툴이란?

프로그래밍 능력이 없어도 소프트웨어나 애플리케이션을 개발할 수 있게 도와주는 도구입니다. 즉, 코딩 없이 개발을 할 수 있습니다. 다양한 노코드툴 중 이용한 사이트는 Webflow입니다.
Webflow는 HTML, CSS, Javascript 편집이 가능하고, 제작 후에 코드 추출이 가능합니다. 애니메이션, 동적 콘텐츠 등 다양한 디자인툴이 있습니다. API를 통한 외부 사이트와의 연동에도 용이하기에 Webflow를 사용해보았습니다.

ChatGPT와 Image Creator from Microsoft Bing

페이지는 사이트 대문, 서비스 장점 소개, 강아지 상담사 소개 섹션을 만들었다. 작업은 ChatGPT로 필요한 정보에 대해 학습시킨 후 사이트 타이틀을 정했다. 타이틀에 따른 문구, 장점 및 소개글을 작성한 후 Image Creator로 필요한 강아지 이미지를 찾아보았다.

ChatGPT

ChatGPT로 '강아지가 사람을 상담해주는 가게'에 대한 페이지를 만든다고 학습시켰다. 주제에 따라 포함될 내용을 먼저 질문을 통해 학습시킨 후 가게의 슬로건을 추천받았다. 10개의 추천 슬로건 중 원하는 번호를 선택한 후 핵심 카피와 한 줄 설명을 써달라고 질문을 했다.
슬로건과 핵심 카피, 한 줄 설명을 통해 가게의 장점 4가지를 추천 받고 강아지 상담사들의 캐릭터도 작성해달라는 질문을 했다.
캐릭터 제작을 위해서는 예시를 학습시켜 필요한 정보를 얻을 수 있었다.

캐릭터 제작을 위해 학습시킨 내용
위에서 말한 그 가게에서 일하는 강아지 상담사들의 캐릭터를 작성해줘.
이름, 성격적 특징, 닉네임, 견종이 필요해.
엉뚱하고 귀여운 내용으로 4 개만 작성해줘 아래는 예시야.

예시:
1.
이름: 띠미
닉네임: 똑똑한 문제 해결사
견종: 비숑 프리제
성격: 띠미는 똑똑하고 문제 해결 능력이 뛰어난 상담사로, 고객들이 어려운 문제를 해결하는 데 도움을 줍니다.

학습 과정 중 다른 답변을 원할 경우 해당 답변 대신 다른 답변을 원한다고 새로 학습시키며 페이지에 대한 정보를 얻었다.

Image Creator from Microsoft Bing

강아지 상담사 캐릭터의 이미지가 필요하기에 Image Creator from Microsoft Bing을 사용했다. 사용 방법은 간단하다. 내가 만들고 싶은 이미지를 설명하면 4개의 사진을 보여주는데 이 중 마음에 드는 사진이 있으면 선택하면 되고 없으면 추가적인 학습, 자세한 설명을 통해 원하는 이미지를 가질 수 있다.
이미지에 대한 설명을 작성하기 전 ChatGPT를 활용했다. 형용사 명사 동사, 스타일" 형태의 프롬프트를 사용한다는 정보를 주고 이미지 설명에 대한 예시도 학습시켰다. 이후 원하는 이미지에 대해 질문한 후 해당 프롬프트에 맞는 문장을 만들어달라고 학습시켰다.
ChatGPT를 통해 만들어진 문장을 Image Creator에 요청을 한 후 내가 원하는 이미지를 얻을 수 있었다. 얻은 이미지로 사이트에 넣어 작업을 완료했다.

노코드툴 그리고 인공지능 활용

코드를 직접 작성하는 과정을 통해서만 페이지가 완성될 수 있다고 생각했다. 하지만 아니었다. 노코드툴을 처음 사용해서 사용법이 어색했지만 기능을 알고 보니 직접 코드를 작성하는 것보다 직관적으로 페이지를 만들 수 있었다. 사용 방법만 익숙해지면 개발자가 아닌 사람들도 페이지를 만들 수 있겠다는 생각이 들었다.
인공지능을 활용한 사이트 2개를 사용하면서 개발자가 조금 더 편하게 개발을 할 수 있겠다는 생각이 들었다. 필요한 정보가 있으면 학습을 통해 원하는 정보를 얻는 과정으로 직접 생각하고 고민하는 시간이 단축되기 때문이다.

위 사이트를 활용하면서 코드를 작성하는 방법만 공부하는 것이 아니라 개발에 조금 더 편리한 방법을 찾아보는 과정도 필요하다고 생각된다.