이 기사는 프로그래밍 초보자인 제가, 생성 AI(Generative AI)도 거의 접해본 적 없는 상태에서 코드 한 줄도 스스로 쓰지 않고 웹사이트를 만든 기록입니다.

만든 것은 이것입니다.

이름은 World City Atlas.

세계의 도시를 경제뿐만 아니라 정치, 산업, 종교, 관광, 문화, 생활, 분쟁, 사회 문제, 도시 경관을 통해 읽기 위한 일본어 비주얼 도시 아틀라스입니다.

먼저 말씀드리자면, 저는 이 사이트의 HTML도 CSS도 JavaScript도 거의 이해하지 못하고 있습니다.

"이 부분을 이렇게 하고 싶어"라고 AI에게 부탁하면, AI가 조사하고, AI가 쓰고, AI가 수정하고, AI가 이미지를 만들고, AI가 확인합니다. 저는 기본적으로 지시를 내렸을 뿐입니다.

이 정도면 이제 프로그래머는 필요 없는 것 아닌가요?

……라고 말하면 혼나겠지만, 적어도 "만들고 싶은 것이 있는 초보자"가 웹사이트를 공개하기까지의 허들은 상당히 무너졌다고 생각합니다.

World City Atlas는 세계의 주요 도시를 일람할 수 있는 정적 사이트(Static Site)입니다.

톱 페이지에는 뉴욕, 도쿄, 런던, 파리, 로스앤젤레스, 서울, 베이징, 이스탄불, 홍콩, 샌프란시스코 등의 도시 카드가 나열됩니다.

각 도시 페이지에는 다음과 같은 정보를 담고 있습니다.

• 소속 국가
• 인구
• 면적
• GDP
• 1인당 GDP
• 기후
• 산업
• 관광
• 지정학
• 노동과 산업
• 문화와 종교
• 생활과 주거
• 교통, 항만, 공항
• 역사, 기억, 사회 문제

단순한 여행 가이드가 아니라, 도시를 "세계의 구조가 보이는 장소"로서 읽는 사이트로 만들고 싶었기에, GDP 순위가 아닌 편집상의 중요도에 따라 도시를 배치했습니다.

예를 들어 뉴욕이나 도쿄 같은 경제 도시뿐만 아니라, 예루살렘, 카이로, 바그다드, 바라나시, 랄리벨라, 카르발라와 같이 종교나 역사의 무게를 가진 도시도 다룹니다.

이 부분이 가장 하고 싶은 말입니다.

저는 이 사이트를 만들면서 에디터를 열어 HTML을 직접 쓰거나, CSS를 스스로 구성하거나, JavaScript 함수를 작성하지 않았습니다.

제가 한 일은 대략 다음과 같습니다.

세계 도시 아틀라스를 만들고 싶어.

정적 HTML로 도시별 페이지를 만들어줘.

일본어로 자세히 써줘.

이미지도 생성 AI로 만들어줘.

Google Analytics도 넣어줘.

스마트폰에서도 보기 편하게 해줘.

SEO도 제대로 해줘.

400개 도시까지 늘려줘.

무리한 요구입니다.

보통 생각하면 초보자가 갑자기 할 수 있는 규모가 아닙니다.

하지만 AI에게 부탁하면, 프로젝트 구성을 읽고, 기존 파일을 확인하며, 페이지 규칙을 지키면서 도시 페이지를 추가해 나갑니다. 게다가 톱 페이지, 공통 CSS, 공통 JS, OGP, 메타 태그, 이미지 배치, 로컬 확인, Git의 차이(diff) 확인까지 해줍니다.

저는 중간에 "이 설명은 좀 더 문화적인 측면으로 해줘", "랭킹 번호는 보여주지 마", "도시 페이지는 AI가 만들었다고 쓰지 마", "통계는 최신 데이터를 검색해"와 같은 지시를 추가했습니다.

그 지시 또한 프로젝트의 규칙으로 저장하여 다음번 이후에도 지키도록 하고 있습니다.

맡긴 범위는 상당히 넓습니다.

처음에는 단순한 도시 목록일 생각이었습니다.

하지만 AI와 상담해 나가는 과정에서 다음과 같은 구성이 되었습니다.

• 톱 페이지
• 도시별 정적 HTML 페이지
• 공통 CSS
• 공통 JS
• 방문 완료 도시 맵
• 도시 카드
• 도시 페이지의 히어로 이미지(Hero Image)
• 통계 카드
• 도시별 장문 해설 섹션
• SNS 카드용 메타데이터

초보자인 저는 "정적 사이트"라는 말도 어렴풋이밖에 모르고 있었지만, AI가 "이 용도라면 DB도 로그인도 필요 없다. 정적 HTML로 충분하다"라고 판단해 주었습니다.

사이트의 디자인도 AI에게 맡겼습니다.

저는 "세계 도시를 경관으로부터 읽는 느낌", "여행 사이트보다는 편집적인 느낌", "하지만 너무 딱딱하지 않게", "스마트폰에서도 보기 편하게"와 같은 모호한 요구사항만 냈습니다.

그럼에도 AI는 히어로 이미지, 도시 카드, 통계 블록, 본문 섹션, 이미지의 겹침 글자, 여백, 반응형 대응(Responsive Design)까지 만들어 주었습니다.

CSS가 무엇을 하고 있는지 솔직히 거의 모릅니다.

하지만 브라우저로 보면 그럴싸한 사이트가 되어 있습니다.

이것은 초보자에게 상당히 위험한 경험입니다.

"모르는데도 만들어 버릴 수 있기" 때문입니다.

도시 페이지의 문장도 AI가 쓰고 있습니다.

다만, 단순한 관광 소개로 만들고 싶지는 않았기에 상당히 세밀한 규칙을 넣었습니다.

• 경제뿐만 아니라 정치, 산업, 종교, 생활, 사회 문제도 다룰 것
• 일본어로 작성할 것
• 여행 안내 책자(Travel pamphlet) 스타일로 만들지 말 것
• 도시의 지리, 노동, 문화, 주거, 교통, 역사를 나누어 작성할 것
• 하나의 긴 문장으로 만들지 않고, 여러 섹션으로 나눌 것
• 도시 페이지 내에서는 "AI가 만들었다"라고 쓰지 말 것
• 순위 번호를 표시하지 말 것

즉, AI에게 "그럴싸한 기사를 써줘"라고 부탁한 것이 아니라, 편집 방침 그 자체를 AI에게 전달한 느낌입니다.

이 부분이 중요하다고 생각했습니다.

AI는 편리하지만, 방향성이 없으면 양산형 문장이 됩니다.

반대로 "무엇을 보고 싶은지", "무엇을 넣고 싶지 않은지", "어떤 독후감을 남기고 싶은지"를 전달하면, 사이트의 인격이 상당히 드러납니다.

이미지도 웹(Web)에서 가져오지 않았습니다.

도시별 헤더 이미지나 섹션 이미지는 로컬의 이미지 생성 AI로 만드는 방침으로 정했습니다.

이미지 생성은 시간이 걸리기 때문에, AI에게 "이미지 생성을 먼저 실행하고, 그 사이에 HTML이나 문장을 작성하라"는 진행 방식까지 지시하고 있습니다.

이것이 마치 인간 팀 같아서 재미있습니다.

이미지 담당이 GPU로 생성하는 동안, 다른 담당이 문장을 쓰고, 또 다른 담당이 페이지를 구성하며, 마지막에 브라우저로 확인하는 식입니다.

하지만 실제로는 거의 전부 AI가 하고 있습니다.

이번에 해보니, 초보자일수록 "AI에게 대충 부탁하는" 것이 아니라, "AI가 지켜줬으면 하는 규칙"을 작성하는 것이 좋겠다고 생각했습니다.

제가 특히 효과적이었다고 생각하는 지시는 이것입니다.

"도시 소개 사이트를 만들어줘"보다,

"세계의 중요 도시를 경제, 정치, 산업, 종교, 생활, 관광, 문화, 사회 문제 관점에서 읽는 일본어 비주얼 도시 아틀라스(Visual City Atlas)를 만들고 싶어"

라는 쪽이 AI의 출력이 안정되었습니다.

"어떤 사이트인가"를 처음에 언어화하는 것만으로도 디자인과 문장이 바뀝니다.

이것도 중요했습니다.

예를 들어 저는 다음과 같은 금지 규칙을 넣고 있습니다.

• 도시 페이지 본문을 JavaScript로 렌더링하지 말 것
• 웹(Web)에서 다운로드한 이미지를 사용하지 말 것
• 도시 페이지에 순위 번호를 표시하지 말 것
• AI 생성물임을 도시 페이지 본문에 쓰지 말 것
• git add .를 사용하지 말 것
• 공개용 파일에 작업용 디렉토리를 섞지 말 것

초보자는 "무엇을 만들까"만 생각하기 쉽지만, AI 개발에서는 "무엇을 하지 않을까"도 상당히 중요합니다.

저는 프로젝트 내에 규칙을 적은 파일을 두고, AI가 매번 그것을 지키게 하고 있습니다.

이것이 상당히 효과적입니다.

채팅으로 매번 "모바일 대응해줘", "Google Analytics 넣어줘", "OGP 넣어줘"라고 말하는 것은 불가능합니다.

그래서 프로젝트의 헌법 같은 파일에 적어둡니다.

그러면 AI는 다음 작업에서도 그 규칙을 읽으면서 진행해 줍니다.

거의 사실입니다.

다만, 완전히 방치할 수 있는 것은 아닙니다.

인간이 한 일도 있습니다.

• 만들고 싶은 사이트의 방향성을 결정함
• 도시의 우선순위에 관여함
• 마음에 들지 않는 표현을 수정하도록 지시함
• 이미지의 분위기를 지시함
• "이것은 아니다"라고 판단함
• 공개하고 싶은 정밀도(Granularity)를 결정함

즉, 코드는 작성하지 않았지만, 판단은 하고 있습니다.

이 부분을 오해하면 위험합니다.

AI는 작업자로서는 상당히 강력하지만, "무엇을 만들어야 하는가"는 자동으로 결정되지 않습니다.

이번 사이트도 만약 제가 아무런 방침을 내놓지 않았다면, 흔한 얕은 수준의 관광 정리 사이트가 되었을 것이라고 생각합니다.

자극적인 제목으로는 "이제 프로그래머는 필요 없다!?"라고 말하고 싶습니다.

하지만 실제로는 아마 반대일 것입니다.

초보자가 AI로 만들 수 있는 상한선이 높아진 결과, 정말로 잘 아는 사람의 가치도 올라간다고 생각했습니다.

왜냐하면 AI는 상당히 많이 만들어주지만, 다음과 같은 판단은 역시 어렵기 때문입니다.

• 이 구성으로 장기 운용이 가능한가
• CSS가 파괴되지 않았는가
• SEO(검색 엔진 최적화)로서 타당한가
• 퍼포먼스(Performance)에 문제가 없는가
• 저작권적으로 위험한 이미지나 문장이 섞여 있지 않은가
• 데이터의 출처나 갱신성은 괜찮은가
• 공개 파일에 불필요한 것이 들어있지 않은가

초보자인 저는 AI가 없었다면 아무것도 만들 수 없었습니다.

하지만 AI가 있어도 프로의 눈이 있다면 더 좋아질 수 있다는 것도 알고 있습니다.

그래서 정확하게는,

프로그래머가 필요 없어지는 것이 아니라,

프로그래머가 아닌 사람도 곧바로 프로덕트(Product)를 만들기 시작할 수 있게 되는 것

이 표현이 더 가깝습니다.

이것은 상당히 큰 변화라고 생각합니다.

가장 무서운 것은, (그냥) 만들어져 버린다는 점입니다.

저는 HTML도 CSS도 JavaScript도 제대로 알지 못합니다.

그런데도 사이트는 작동합니다.

도시 페이지는 늘어납니다.

이미지도 들어갑니다.

OGP도 설정됩니다.

모바일 표시도 고쳐집니다.

Git의 차이(diff)도 확인됩니다.

이는 편리하지만, 동시에 "내가 이해하지 못하는 것을 공개하는 두려움"도 있습니다.

그렇기에 AI에게 맡기는 경우라도 최소한,

• 무엇이 공개되는가
• 어떤 파일이 변경되었는가
• 이미지나 문장의 권리는 괜찮은가
• 개인정보나 비밀 정보가 섞여 있지 않은가
• 출처가 필요한 데이터는 확인되었는가

위 사항들은 살펴볼 필요가 있다고 생각했습니다.

코드를 작성하지 않더라도, 책임은 사라지지 않습니다.

이번 경험을 통해 가장 변한 점은, "만들기 전에 포기하는 것"이 줄어들었다는 점입니다.

이전 같았으면 세계 400개 도시의 아틀라스 같은 것은, 초보자가 만들려고 시도하는 시점에서 불가능합니다.

HTML을 배운다.

CSS를 배운다.

JavaScript를 배운다.

디자인을 고민한다.

이미지를 준비한다.

글을 쓴다.

SEO를 조사한다.

Git을 사용한다.

공개한다.

이 단계에서 대략 마음이 꺾입니다.

하지만 AI가 있으면, 갑자기 "만들면서 생각하기"를 할 수 있습니다.

모르는 부분은 AI가 한다.

마음에 들지 않는 부분은 고치게 한다.

규칙을 추가한다.

페이지를 늘린다.

다시 고친다.

초보자에게 이것은 학습이라기보다, 갑작스러운 제작입니다.

World City Atlas는 프로그래밍 초보자인 제가 코드를 작성하지 않고 AI와 함께 만들고 있는 정적 웹사이트 (Static Web Site)입니다.

아직 완성되지 않았습니다.

오히려 400개 도시 구상이라 끝은 멀었습니다.

하지만 메인 페이지가 있고, 도시 페이지가 있고, 이미지가 있고, 글이 있고, 스마트폰에서도 볼 수 있으며, 공개할 수 있는 단계까지는 왔습니다.

이것을 스스로 코드를 써서 만들라고 했다면, 절대로 불가능했을 것입니다.

하지만 AI에게 부탁했더니 할 수 있었습니다.

다시 한번 말씀드립니다.

저는 코드를 작성하지 않았습니다.

그럼에도 웹사이트는 만들 수 있었습니다.

프로그래머가 불필요해질지는 모르겠습니다.

하지만 프로그래밍 초보자가 "만드는 쪽"으로 넘어가는 시대는, 이미 시작되었다고 생각합니다.