ChatGPT 4o 도움받아 웹플로우로 웹사이트 만들기
ChatGPT를 1:1 튜터처럼 활용하는 방법
코드도 모르는데
웹사이트를?
웹사이트를 만들려면 보통 HTML, CSS, JavaScript 같은 프로그래밍 언어를 알아야 한다고 생각하죠. 하지만 이제는 코딩을 몰라도 웹사이트를 쉽게 만들 수 있는 노코드(No-code) 웹빌더들이 많이 나왔어요. 그 중 하나가 바로 웹플로우(Webflow)입니다. 웹플로우는 직관적인 인터페이스와 강력한 기능을 제공해서 초보자도 손쉽게 멋진 웹사이트를 만들 수 있게 도와줍니다. 드래그 앤 드롭 방식으로 디자인하고, 코드 없이도 바로 웹사이트를 구축할 수 있어요.
하지만 생각보다
쉽지 않았습니다..
워드프레스로 만들려다 포기한 사이트... 한둘이 아니다..워드프레스로 예전에 홈페이지를 만들려고 했던 적이 있어요. 몇 일간 엄청 스트레스를 받고 홈페이지를 2번이나 실수로 날렸던 경험이 생각났습니다. 웹플로우 역시 직관적이라곤 하나 각종 기능을 HTML, CSS에 대한 기초 지식이 없으면 쉽게 하기 힘든 건 마찬가지였어요. 영어의 장벽도 있고요.
외계어같았던 웹플로우 제작 페이지그래서 국내 웹빌더 서비스인 아임웹으로 돌아가야 하나 싶을 때, ChatGPT가 생각났습니다. 이번에 새로 나온 ChatGPT 4o는 꽤나 막강하거든요!
각성한 ChatGPT 4o
ChatGPT 4o는 이전 버전보다 훨씬 향상된 성능을 자랑합니다. 특히 한글 인식 능력이 뛰어납니다. 예전에는 한글을 영어로 번역해 영어로 질문을 했죠. 한글->영어->한글->영어 이런 식의 무한굴레였습니다. 새로운 버전에서는 한글로 질문해도 빠르고 정확하게 답변을 제공해줍니다. 마치 1:1 튜터와 같은 경험을 할 수 있어요.
아주 기초적인 질문도 바로 답해주는 GPTChatGPT 4o 활용법
: 사진에 대한 설명, 분석 요청이 가능
ChatGPT 4o의 가장 큰 장점 중 하나는 사용자가 사진이나 스크린샷을 업로드하면, 그 내용을 빠르게 분석하고 설명해 줄 수 있다는 점입니다. 예를 들어, 웹플로우로 웹사이트를 만들다가 막히는 부분이 생기면 해당 화면을 캡처하여 ChatGPT 4o에게 질문할 수 있습니다. 그러면 ChatGPT 4o는 해당 화면을 분석하여 필요한 정보를 제공하거나 문제 해결 방법을 안내해 줍니다. 저는 이런 방식으로 대부분의 문제를 해결했습니다!
웹플로우를 처음 써봄에도
웹사이트 개발이 가능했다!
웹플로우를 처음 사용하는 사람도 ChatGPT 4o를 통해 쉽고 빠르게 웹사이트를 제작할 수 있습니다. ChatGPT 4o는 단계별로 자세한 가이드를 제공하며, 이해하기 쉽게 설명해 줍니다. 예를 들어 웹사이트 구축을 위한 단계나 모르는 개념들에 대해 설명을 요청하면 다 알려줍니다. 레이아웃 디자인 방법, 텍스트와 이미지 추가 방법, 인터랙티브 요소 삽입 방법 등도 상세히 안내합니다. 이젠 코딩 지식이 없어도 전문가처럼 웹사이트를 만들 수 있는 시대입니다.
ChatGPT 4o와 함께한
웹사이트 제작 과정
제가 실제로 ChatGPT 4o를 활용하여 웹사이트를 제작한 과정을 공유해 드릴게요. 처음에는 조금 낯설었지만, ChatGPT 4o에게 단계별로 질문하면서 차근차근 배워나갔습니다. 예를 들어, “웹플로우에서 global 컴포넌트의 역활은 뭐니?”라고 묻자, ChatGPT 4o는 global 컴포넌트의 역할을 아래처럼 자세히 설명해 주었습니다.
원하는 대로 구현되지 않아 답답한 상황도 당연히 생깁니다다. 그럴 때는 제가 원하는 것, 문제점을 명확하게 설명하고 해결책을 요청했습니다. 답을 아주 가끔 영어로 줄 때도 있는데요, 아래처럼 한글로 답을 달라고 요청하면 됩니다. 이와 같은 방식으로 대부분의 문제를 해결할 수 있었습니다.
벤치마킹하려는 사이트가 있다면 아래와 같이 캡쳐해서 이미지를 전달하고 요청하면 됩니다. 이미지만 전달하면 어떤 요청인지 정확히 모르니 '이미지에 중간 로고 바가 흘러가는 효과를 주고 싶어. 어떻게 해야해?'라고 정확하게 언급해야겠죠!
그렇게 나온 킥템템플릿 사이트입니다. 아래 링크를 클릭하면 확인하실 수 있어요.
AI로 인한 업무 생산성 양극화
ChatGPT 4o로 웹사이트 제작뿐만 아니라 업무 자동화, 서비스 개발까지 충분히 가능합니다. 이미지, 영상 AI 서비스들도 고도화되고 있어 여러 툴을 익힌다면 1인이 낼 수 있는 퍼포먼스 역량은 상상이 안갑니다. 업무에 있어서 AI 활용능력에 따라 엄청난 양극화가 될 겁니다. 저도 제 비즈니스, 고객사들의 문제를 가지고 업무 자동화, 신규 서비스 개발까지 하나씩 테스트해보려고요.
