코딩의 'ㅋ'자도 모르는 비전공자에게 웹사이트 제작은 거대한 벽과 같았습니다. 하지만 이제 ChatGPT와 같은 생성형 AI의 도움으로, 아이디어만 있다면 단 몇 시간 만에 실제로 동작하는 나만의 웹페이지를 가질 수 있는 시대가 되었습니다.

중요한 것은 "코딩을 배우는 것"이 아니라 "AI와 대화하는 법"을 익히는 것입니다. 복잡한 프로그래밍 언어를 공부하지 않고도, ChatGPT를 코딩 파트너로 활용해 전문적인 웹사이트를 구축하는 실전 프로세스를 가감 없이 공개합니다.

첫 번째 단계: 구체적인 설계도 그리기 AI에게 무작정 "웹사이트 만들어줘"라고 하면 결과물이 엉망이 됩니다. "심플한 디자인의 나만의 포트폴리오 사이트를 만들고 싶어. 상단에는 메뉴바가 있고, 중앙에는 내 사진과 소개글, 하단에는 연락처가 들어가는 구조면 좋겠어"라고 구체적으로 요청하세요.

기초 구조 요청하기 (HTML/CSS) ChatGPT에게 "앞서 말한 구조를 바탕으로 HTML과 CSS 코드를 작성해 줘"라고 명령하세요. AI는 웹사이트의 뼈대(HTML)와 디자인(CSS) 소스코드를 즉시 생성합니다. 이 코드를 복사해서 메모장에 저장하는 것만으로도 사이트의 절반은 완성된 것입니다.

VS Code 설치 및 코드 확인 작성된 코드를 실행해 볼 무료 프로그램인 'Visual Studio Code(VS Code)'를 설치하세요. 새 파일을 만들어 AI가 준 코드를 붙여넣고 저장한 뒤, 웹 브라우저로 열어보세요. 내 컴퓨터 화면에 내가 상상하던 페이지가 떠오르는 경이로운 순간을 경험하게 됩니다.

디자인 수정 요청: "파란색을 더 부드럽게 바꿔줘" 디자인이 마음에 안 든다면 AI에게 말로 수정하세요. "폰트를 좀 더 세련된 것으로 바꾸고, 배경색을 연한 회색으로 변경하는 CSS 코드를 다시 줄래?"라고 하면 됩니다. AI는 지치지 않고 당신의 까다로운 취향을 반영한 코드를 다시 내놓을 것입니다.

동적인 기능 추가하기 (JavaScript) 사이트에 버튼을 눌렀을 때 팝업이 뜨거나, 이미지가 슬라이드 되는 기능을 넣고 싶다면 자바스크립트가 필요합니다. 이 역시 AI에게 "버튼을 누르면 '안녕하세요'라는 환영 인사가 뜨는 기능을 추가해 줘"라고 요청하면 코드를 알아서 짜줍니다.

이미지와 텍스트 개인화 AI가 준 코드에는 임시 이미지와 텍스트가 들어있습니다. 이 부분을 내가 찍은 사진 파일 경로와 내 소개글로 직접 바꿔 넣으세요. 코드의 어느 부분을 수정해야 하는지도 ChatGPT에게 물어보면 친절하게 위치를 알려줍니다.

반응형 웹 디자인 적용 모바일에서도 잘 보여야 진짜 웹사이트입니다. "내 사이트가 스마트폰 화면에서도 예쁘게 보이도록 반응형 코드로 보완해 줘"라고 요청하세요. AI가 미디어 쿼리(Media Query)를 적용한 코드를 제공하여 어떤 기기에서도 완벽한 레이아웃을 유지하게 해줍니다.

오류 해결: "화면이 안 떠, 도와줘!" 코드를 복사하다 실수해서 화면이 깨져도 당황하지 마세요. 에러 메시지나 코드를 그대로 긁어서 ChatGPT에게 던지면 "여기에 오타가 있네요"라며 즉시 수정안을 제시합니다. 24시간 대기하는 일대일 코딩 튜터가 있는 셈입니다.

무료 호스팅으로 전 세계에 배포하기 내 컴퓨터에서만 보이는 사이트를 남들도 볼 수 있게 하려면 '배포' 과정이 필요합니다. Netlify나 GitHub Pages 같은 무료 서비스를 이용하면 코드를 드래그 앤 드롭하는 것만으로도 고유한 주소(URL)를 가진 웹사이트가 탄생합니다.

지속적인 업데이트와 기능 확장 한 번 만든 사이트에 블로그 기능을 넣거나, 다크 모드를 추가하는 등 끊임없이 기능을 확장해 보세요. AI와 대화하며 사이트를 키워나가는 과정에서 자연스럽게 코딩의 논리 구조를 익히게 되고, 이는 곧 여러분의 강력한 디지털 경쟁력이 될 것입니다.