프론트엔드 엔지니어가 AI로 완성한 n8n 랜딩 페이지 제작 후기

안녕하세요. 인포그랩의 프론트엔드 엔지니어 Hailie입니다. 오늘날 AI 기술이 빠르게 발전하면서 개발자의 업무 수행 방식도 크게 변화하고 있습니다. 이제 개발자는 AI로 코드 작성뿐만 아니라 기획과 디자인 업무도 수행할 수 있습니다.

최근 저는 다양한 AI 도구를 활용해 인포그랩 공식 홈페이지의 새로운 랜딩 페이지를 기획, 디자인, 개발했습니다. 로코드 기반 워크플로 자동화 도구인 n8n의 랜딩 페이지인데요. 이 글에서는 AI 기반 랜딩 페이지 제작 배경과 제가 활용한 AI 도구, 제작 과정, 효과적인 AI 활용 방법을 소개하겠습니다.

AI 기반 랜딩 페이지 제작 배경

출처=Unsplash

랜딩 페이지 제작은 보통 기획자와 디자이너, 개발자가 협업해 진행하는 작업입니다. 그러나 이번 프로젝트는 평소와 다른 상황에서 시작했습니다. 배포 일정이 촉박했고, 팀 리소스가 제한돼 제가 기획부터 디자인, 개발까지 모두 맡아야 했습니다.

익숙하지 않은 일이라 처음에는 부담스러웠습니다. 하지만 이를 계기로 ‘AI 도구를 적극적으로 활용해 보고 싶다’는 생각도 들었습니다. 저는 평소 ‘AI가 개발 프로세스를 얼마나 효율화하는지’ 관심이 많았습니다. AI로 랜딩 페이지를 제작하면 그 영향력을 실제 경험할 수 있을 거로 기대했습니다.

나아가 기획과 디자인에 AI를 효과적으로 사용하는 방법도 익히고 싶었습니다. 따라서 저는 이번 프로젝트를 개발자의 역할을 확장하는 새로운 도전 기회로 삼기로 했습니다.

인포그랩의 개발 문화는 새로운 기술과 도구를 적극적으로 탐색하고 도입하는 데 매우 개방적입니다. 저는 이러한 환경 덕분에 다양한 AI 도구로 업무 프로세스 개선 방안을 적극적으로 실험할 수 있었습니다.

저는 AI와 협업하며 n8n 랜딩 페이지 제작의 전 과정을 주도적으로 수행했습니다. 이는 AI를 활용한 기획, 디자인, 개발의 새로운 가능성을 발견하는 값진 경험이었습니다.

페이지 제작에 활용한 AI 도구

제가 이번 랜딩 페이지 제작에 사용한 AI 도구는 다음과 같습니다.

• 기획: Google AI Studio, Notion AI, Perplexity, 사내 커스텀 GPT
• 와이어프레임: Relume, Figma 플러그인
• 디자인: Canva, Figma

제작 과정

AI로 n8n 랜딩 페이지를 제작한 과정을 단계별로 살펴보겠습니다.

기획

기획 단계에서는 사용자 중심 사고를 바탕으로 랜딩 페이지의 주요 메시지와 콘텐츠 구조를 정의해야 했습니다. 이를 위해 다음 도구를 활용했습니다.

• Google AI Studio: 기획 아이디어 제안
  • Google AI Studio는 복잡한 아이디어를 빠르게 정리하고, 다양한 관점에서 문제를 분석하는 데 유용했습니다. 이 도구는 요구사항에 따라 기능 목록을 자동 생성해 기획 시간을 줄여줬습니다. 저는 "GitLab을 DevOps 도구로 사용하는 개발자를 위한 n8n 생산성 향상 기능을 정리하라"는 프롬프트를 사용해 초기 기획에 도움을 받았습니다.
• Notion AI: 기획 초안 수정, 문구 확정
  • Notion AI는 기획 내용을 개선하고, 체계적으로 문서화하는 데 탁월합니다. 이 도구는 기획 초안을 보완하고, 간결하게 정리하는 데 도움이 됐습니다. 저는 핵심 메시지를 다듬어, 최종 문구로 확정하는 데 Notion AI를 사용했습니다.
• Perplexity: 사실 검증
  • Perplexity는 신뢰성 있는 출처를 명확히 제시해 잘못된 정보 생성(Hallucination)이 적습니다. 저는 ‘n8n 랜딩 페이지에 포함한 정보가 사실임’을 검증하는 데 이 도구를 활용했습니다.
• 사내 커스텀 GPT(TCR by Infograb): 문구 작성, CTA 배치
  • TCR by InfoGrab은 인포그랩의 커스텀 GPT로, 기술 콘텐츠 리뷰와 마케팅 문구 생성에 특화됐습니다. 저는 설득력 있는 랜딩 페이지 문구를 작성하고, CTA(Call to Action)를 효과적으로 배치하는 데 이 도구를 사용했습니다. 구체적으로는 "n8n이 개발자의 업무 자동화 수요를 해결할 수 있음을 강조하는 문구를 작성해"라는 프롬프트를 활용했습니다.

기획 팁: 사용자 행동 예측 기반 기획

인포그랩 커스텀 GPT ‘TCR by Infograb’ 화면

저는 기획 단계에서 AI를 사용할 때, 단순히 콘텐츠 구조를 정의하는 데 그치지 않았습니다. AI로 사용자 행동까지 예측해 페이지 설계를 최적화했습니다. TCR by Infograb으로 사용자 유형별 행동 패턴 데이터를 분석하고, 이를 기반으로 각 섹션의 중요도를 재배치했습니다. 예를 들어, "CTA 버튼을 상단에 배치하면 클릭률이 15% 상승할 가능성이 높다"는 데이터 기반 인사이트를 얻어 실무에 반영했습니다.

와이어프레임 제작

와이어프레임 단계에서는 레이아웃 설계와 사용자 흐름 정의가 중요했습니다. 이를 위해 다음 도구를 활용했습니다.

• Relume: 와이어프레임 제작
  • Relume은 클릭만으로 컴포넌트를 생성하고, 스타일을 적용하는 기능을 제공합니다. 또 Figma로 내보내기도 지원해 편리하게 작업할 수 있습니다. 저는 Relume을 활용해 자동화된 컴포넌트로 기본 와이어프레임을 제작했습니다. 이 도구로 n8n 랜딩 페이지의 주요 섹션을 자동 생성한 덕분에 초기 설계 시간을 단축할 수 있었습니다.
• Figma 플러그인(Wireframe Designer): 와이어프레임 수정
  • Figma 플러그인은 자동화로 반복적인 디자인 작업을 최소화해 디자인 시간을 줄여줍니다. 저는 Figma 플러그인으로 Relume에서 생성한 와이어프레임을 수정하고 세부 사항을 추가했습니다. 이로써 세부 콘텐츠 구성과 사용자 흐름을 최적화할 수 있었습니다.

와이어프레임 제작 팁: AI 콘텐츠 생성

프롬프트 입력 전후 자동 생성 문구 비교 화면(왼쪽은 입력 전, 오른쪽은 입력 후)

저는 Relume의 AI 콘텐츠 생성 도구도 와이어프레임 제작에 사용했습니다. 이 도구는 Lorem Ipsum(샘플 텍스트) 대신 실제 콘텐츠에 가까운 텍스트를 자동 생성합니다. 저는 Hero Header 섹션에서 "Describe core detail about n8n"이라는 프롬프트를 입력했습니다. 그 결과, n8n의 핵심 특징을 담은 기존 문구가 명확하고 감각적인 표현으로 개선됐습니다. 이로써 초기 콘텐츠 제작 시간을 줄이고 품질도 높였습니다.

디자인 구현

디자인 단계에서는 시각적 완성도를 높이고, 브랜드 통일성을 유지하는 게 핵심이었습니다. 이를 위해 다음 도구를 활용했습니다.

• Canva: 아이콘, 배너 제작
  • Canva는 간단한 그래픽 요소나 아이콘을 빠르게 제작하는 데 유용합니다. 디자인 경험이 적어도 쉽게 사용할 수 있습니다. 저는 Canva로 n8n 랜딩 페이지의 아이콘, 배너 등을 제작했습니다.
• Musho.ai: 디자인 테스트
  • Musho.ai는 프롬프트 입력만으로 디자인 초안을 생성하는 Figma 플러그인입니다. 저는 Musho.ai로 n8n 랜딩 페이지 디자인을 테스트만 하고, 최종 디자인에 사용하지 않았습니다. 이는 새로운 랜딩 페이지가 인포그랩의 기존 웹사이트와 디자인 일관성을 유지하도록 하기 위함이었습니다.

디자인 팁: Canva Magic Media로 OG 이미지 제작

n8n 랜딩 페이지의 OG 이미지

랜딩 페이지를 소셜 미디어에 효과적으로 공유하려면 OG(Open Graph)* 이미지도 제작해야 합니다. 저는 Canva의 AI 이미지 생성 기능인 Canva Magic Media로 OG 이미지 배경에 들어갈 기하학적 디자인을 제작했습니다. 프롬프트 입력창에 원하는 이미지를 설명하고, 이미지 스타일을 추가했더니 AI가 아이콘 디자인 4개를 생성했습니다. 저는 여기서 기존 OG 이미지와 시각적으로 통일성 있고, 세련된 디자인을 선택했습니다. 그러나 완성도를 높이기 위해 이를 그대로 활용하지는 않았습니다. 다만 AI 생성 결과물을 개선해 최종적으로 위 OG 이미지를 제작했습니다.

*OG: Open Graph의 약어. 웹페이지의 미리보기 정보(메타데이터)를 정의하는 표준 프로토콜. SNS에서 웹 링크를 공유할 때, 제목과 이미지, 설명, URL을 자동으로 불러와 카드 형태로 보여주는 데 사용

결과

인포그랩 공식 홈페이지에 적용된 n8n 랜딩 페이지 최종 화면

위 과정을 거쳐 n8n 랜딩 페이지의 최종 결과물을 완성했습니다. 위 이미지는 인포그랩 공식 홈페이지에 실제로 반영된 신규 n8n 랜딩 페이지입니다.

저는 이번 프로젝트로 AI 기술이 작업 속도와 효율성을 획기적으로 향상한다는 점을 체감했습니다. 기획부터 디자인, 개발까지 모든 과정을 혼자 수행하면서 다양한 AI 도구의 도움으로 업무 생산성과 품질을 모두 높일 수 있었습니다.

아울러 여러 AI 도구를 유기적으로 연결해 사용하면 생산성을 극대화할 수 있다는 점도 깨달았습니다. 예를 들어, Relume으로 만든 와이어프레임을 Figma에서 다듬거나, 커스텀 GPT로 작성한 마케팅 문구를 Notion AI로 정제하는 작업 방식이 특히 효과적이었습니다.

또 제작 과정에서 AI를 활용해 다양한 시안을 빠르게 생성하고 검토할 수 있어 좋았습니다. 이로써 여러 디자인 콘셉트와 메시지를 테스트하고, 최적의 조합을 찾아 n8n 랜딩 페이지를 완성했습니다.

맺음말

AI를 활용한 n8n 랜딩 페이지 제작 프로젝트로 많은 걸 배웠습니다. 특히 AI가 반복 작업 효율화를 넘어 창의적인 결과물 생산에도 기여한다는 점을 직접 경험했습니다.

인포그랩에는 새로운 기술과 도구를 적극적으로 탐색하고 실험하는 문화가 있습니다. 혁신을 장려하는 사내 문화 덕분에 저는 다양한 시도로 더 나은 결과물을 만들어낼 수 있었습니다.

앞으로 저는 AI와 같은 혁신 기술로 양질의 결과물을 빠르게 완성해 회사 성장에 기여하고, 기획과 디자인 역량도 있는 개발자로 도약하고자 합니다. 이 글이 AI 도구를 활용한 프론트엔드 개발에 관심 있는 분께 유익한 인사이트가 되길 바랍니다.

참고 자료

1. Google AI Studio 홈페이지, https://aistudio.google.com/welcome
2. Notion AI 가이드, https://www.notion.com/ko/help/guides/category/ai?slug=ai
3. Perplexity 홈페이지, https://www.perplexity.ai/
4. Relume 홈페이지, https://www.relume.io/
5. Figma 플러그인(Wireframe Designer) 페이지, https://www.figma.com/community/plugin/1228969298040149016/wireframe-designer
6. Canva AI 이미지 생성기 페이지, https://www.canva.com/ai-image-generator/
7. Musho.ai 홈페이지, https://musho.ai/

인포그랩은 고객의 디지털 전환을 지원하는 혁신적인 솔루션을 제공합니다. GitLab과 DevOps를 효과적으로 도입하고 싶으신가요? 인포그랩에서 전문적인 컨설팅과 교육으로 여러분 조직의 디지털 혁신을 지원해 드리겠습니다. 지금 문의하세요.