개발 몰라도 AI로 홈페이지 만드는 방법

현재 보고 계신 로고닷 홈페이지는 AI를 활용해 직접 구축하고 운영하고 있습니다.

별도의 개발팀 없이 디자인부터 수정, 배포까지 자체적으로 진행했습니다.

물론 처음부터 개발 경험이 있었던 것은 아닙니다.

HTML, CSS, JavaScript를 다룰 줄 몰랐고, 웹사이트를 만들어 본 경험도 없었습니다.

하지만 AI 코딩 도구를 활용하면서 상황은 달라졌습니다.

몇 년 전만 해도 홈페이지 제작은 개발자의 영역으로 여겨졌지만, 이제는 AI를 활용하면 개발 경험이 거의 없어도 직접 웹사이트를 구축할 수 있는 시대가 되었습니다.

이번 글에서는 로고닷 홈페이지를 제작하며 경험한 과정을 소개해 보려고 합니다.

왜 직접 만들게 되었을까?

처음에는 개발자와 함께 홈페이지를 제작했습니다.

하지만 작업이 진행될수록 작은 수정 하나에도 시간이 필요했고, 원하는 결과가 정확하게 반영되지 않는 경우도 있었습니다.

특히 브랜드 홈페이지는 디테일이 중요합니다.

버튼의 크기, 여백, 애니메이션 속도, 모바일 화면에서의 움직임까지 모두 브랜드 경험에 영향을 주기 때문입니다.

수정 요청이 반복될수록 한 가지 생각이 들었습니다.

직접 수정할 수 있다면 더 빠르고 정확하게 브랜드의 의도를 반영할 수 있지 않을까?

그때부터 AI를 활용해 직접 홈페이지를 만들어보기 시작했습니다.

AI 코딩 도구는 어떻게 활용했을까?

로고닷 홈페이지 제작에는 Claude를 활용했습니다.

Claude는 원하는 내용을 입력하면 코드를 생성하거나 수정해 주는 AI 도구입니다.

예를 들어 다음과 같은 요청을 할 수 있습니다.

• 버튼에 라임 컬러 호버 효과를 추가해 줘
• 모바일 화면에서 글자가 겹치지 않게 수정해 줘
• 타이핑 애니메이션을 구현해 줘
• 포트폴리오 레이아웃을 수정해 줘
• 페이지 로딩 속도를 개선해 줘

채팅하듯 요청하면 실제 코드가 수정되고 결과가 반영됩니다.

처음에는 코드가 낯설게 느껴질 수 있지만 반복적으로 수정하다 보면 구조를 조금씩 이해하게 됩니다.

마치 디자인 툴을 처음 배울 때와 비슷합니다.

처음에는 어렵지만 계속 사용하다 보면 어떤 부분을 수정해야 하는지 감이 생기기 시작합니다.

AI를 활용해 AI를 배우다

처음부터 Claude Code를 사용할 줄 알았던 것은 아닙니다.

설치 방법부터 오류 해결, 배포 과정까지 모두 AI의 도움을 받아 진행했습니다.

Claude 사용 방법은 ChatGPT와 Gemini를 활용해 학습했고, 반대로 Claude는 실제 개발 작업을 수행하는 역할을 담당했습니다.

예를 들어 다음과 같은 질문을 반복했습니다.

• Claude는 어떻게 설치하나요?
• 터미널은 어떻게 사용하나요?
• 도메인은 어떻게 연결하나요?
• 이 오류는 왜 발생한 건가요?

AI는 각 과정에 필요한 정보를 단계별로 설명해 주었고, 덕분에 생각보다 빠르게 홈페이지를 구축할 수 있었습니다.

이 과정에서 느낀 점은 하나였습니다.

AI를 활용한 개발은 코드를 얼마나 많이 아느냐보다 원하는 결과를 얼마나 명확하게 설명할 수 있는지가 더 중요하다는 것입니다.

디자인은 AI가 아닌 사람이 결정합니다

물론 AI가 모든 것을 대신 만들어 주는 것은 아닙니다.

로고닷 홈페이지 역시 디자인 방향은 직접 결정했습니다.

브랜드 컬러, 타이포그래피, 여백, 레이아웃, 애니메이션의 분위기까지 먼저 정리한 뒤 AI를 활용해 실제 웹사이트로 구현했습니다.

즉, AI가 디자인을 만든 것이 아니라 원하는 디자인을 구현하는 과정에 활용된 것입니다.

물론 피그마 없이도 홈페이지를 제작할 수 있습니다.

하지만 원하는 결과를 더 정확하게 전달하기 위해 먼저 디자인 방향을 정리한 뒤 작업하는 방식을 선택했습니다.

결국 AI는 디자이너의 역할을 대신하는 것이 아니라 아이디어를 더 빠르게 현실로 만들어 주는 도구에 가깝다고 생각합니다.

실제 홈페이지 제작 과정

로고닷 홈페이지는 먼저 전체 구조를 설계하는 것부터 시작했습니다.

필요한 메뉴는 다음과 같았습니다.

• Home
• Process
• Portfolio
• Insights
• Contact

이후 각 페이지에 필요한 내용을 정리하고 디자인 방향을 설정했습니다.

그다음 Claude를 활용해 실제 웹사이트 구조를 만들고 필요한 기능을 하나씩 추가했습니다.

메인 화면에는 로고닷의 핵심 문장인 "One dot. Infinite identity." 가 타이핑되는 애니메이션을 적용했습니다.

브랜드 컬러인 라임 컬러를 인터랙션 요소에 적용하고 모바일 환경에서도 자연스럽게 보이도록 여러 차례 수정했습니다.

결국 홈페이지의 완성도는 거창한 기능보다 작은 디테일을 얼마나 반복해서 다듬느냐에 달려 있었습니다.

AI는 도구이고, 브랜드는 사람이 만듭니다

로고닷 홈페이지는 AI가 대신 만든 결과물이 아닙니다.

브랜드의 방향과 디자인은 사람이 결정하고, AI는 그것을 구현하는 도구로 활용되었습니다.

AI 덕분에 개발 경험이 많지 않아도 원하는 아이디어를 빠르게 현실로 만들 수 있게 되었지만, 브랜드의 본질을 고민하는 과정까지 대신해 주지는 않습니다.

로고닷은 앞으로도 새로운 기술을 적극적으로 활용하되, 브랜드의 본질을 고민하는 과정만큼은 놓치지 않으려 합니다.

좋은 브랜드는 결국 기술이 아니라 사람의 생각에서 시작되기 때문입니다.