AI로 나만의 브랜딩을 담은 랜딩페이지 만들기

AI로 나만의 브랜딩을 담은 랜딩페이지 만들기 – 후킹영상부터 기획까지!

소개

개인 포트폴리오를 만들고 싶다는 생각은 늘 있었지만, 이번엔 좀 더 특별하게 해보고 싶었어요. 단순히 이력이나 작업물을 나열하는 게 아니라, 제가 얼마나 AI 도구를 적극적으로 활용할 수 있는 사람인지를 보여주는 포트폴리오를 만들고 싶었거든요.

그래서 이번 수업에서 다룬 후킹영상이 포함된 랜딩페이지 제작은 저에게 완벽한 기회였어요! 무엇보다 기획 → 영상 → 이미지 → 비주얼 구현까지의 흐름을 직접 해보며 제 브랜드를 구체화할 수 있다는 점이 정말 흥미로웠습니다 ✨

진행 방법

1️⃣ PDL 전략으로 출발!

처음 배운 개념 중 가장 인상 깊었던 건 PDL 메시지 전략이었어요.

  • P (Problem): 공감되는 문제를 던지기

  • D (Discovery): 새로운 해결책을 제시하기

  • L (Love): 재미와 흥미로 이끌기

처음엔 막연했지만, 이 전략을 활용해서 사용할 수 있게 지피티에게 물어봤어요!

웹 사이트의 한국 버전의 스크린 샷

제 포트폴리오는 새로운 방식으로 나를 소개하는 것이 핵심이었기 때문에 지피티가 말해준 대로 DISCOVERY 스타일로 방향을 잡았어요. 이 전략 하나로 기획의 뼈대가 생긴 느낌이었어요!

2️⃣ 도구별 역할 분담

도구

역할

ChatGPT

전체 흐름 기획, 랜딩페이지 구성안 작성

NanoBanana

콘셉트에 맞는 이미지 생성

VEO3

후킹 영상 제작 (자막 없이)

Canva

최종 랜딩페이지 디자인 구성

💡 특히 물결님이 주신 기획 링크 덕분에 ‘기획’이라는 추상적인 단어가 구체적인 단계로 느껴졌어요. 덕분에 생각보다 훨씬 쉽게 시작할 수 있었답니다.

🔍 확장 사례: Hero 영역을 위한 후킹영상 실험

기획을 하면서 가장 집중했던 부분 중 하나는 바로 Hero 영역이에요. 첫인상에서 강한 임팩트를 주기 위해, 여기에 후킹영상을 배경으로 넣는 실험을 해봤어요.

✅ Hero 구성 아웃라인 (DISCOVERY 전략 기반)

  • H1: “Designer Portfolio”

  • Sub: “감각을 경험하세요. 프로젝트와 아이덴티티가 한눈에 보이는 공간.”

  • KV(Key Visual): 추상 3D 글래스모피즘 + 블루/화이트블루 그라데이션 모션 배경

🎥 영상 제작 흐름

  1. ChatGPT에게 상세한 Hero 가이드 생성 요청 → Canva 구성에 맞춘 명확한 가이드라인 확보

  2. HiRuo 프롬프트로 추상적인 글래스모피즘 씬을 정의:

Abstract 3D glassmorphism scene, blue and white-blue gradient background, transparent floating shapes (spheres, cylinders, panels), soft cinematic lighting, minimal and elegant, subtle depth of field, clean modern atmosphere, gentle slow motion, refined reflections, futuristic portfolio intro, text "Designer Portfolio" appears on glassy card overlay at the end
--motion high --raw --ar 16:9 --bs 2
  1. VEO3 영상 프롬프트

{
  "version": "1.0",
  "title": "디자이너 포트폴리오 - Hero Hook",
  "duration_seconds": 9,
  "aspect_ratio": "16:9",
  "fps": 24,
  "scenes": [
    {
      "id": "s1",
      "prompt": "블루와 화이트블루 그라데이션 배경, 반투명한 글래스모피즘 도형(구, 사각형, 원통)이 천천히 부유하는 장면. 부드럽게 확산된 조명, 미니멀하고 세련된 무드.",
      "camera": "느린 패닝",
      "action": "도형들이 은은하게 빛을 반사",
      "duration": 3.0
    },
    {
      "id": "s2",
      "prompt": "투명한 3D 도형들이 서로 겹치며 빛의 굴절이 고급스럽게 표현되는 장면. 미묘한 그림자와 유리 질감 강조, 전체적으로 시네마틱하고 미래적인 느낌.",
      "camera": "좌우 느린 패닝",
      "action": "광원이 서서히 이동하며 반짝임 생성",
      "duration": 3.0
    },
    {
      "id": "s3",
      "prompt": "배경의 도형들이 뒤로 멀어지며 중앙이 비워지고, 글래스모피즘 카드 스타일의 텍스트 ‘Designer Portfolio’가 등장.",
      "camera": "정면 고정, 살짝 줌 인",
      "action": "텍스트 위로 은은한 발광 효과",
      "text_overlay": {
        "text": "Designer Portfolio",
        "style": "산세리프, 글래스 카드 위 중앙, 화이트/블루 글로우"
      },
      "duration": 3.0
    }
  ],
  "voiceover": { "enabled": false },
  "audio": {
    "music": {
      "enabled": true,
      "mood": "미니멀하고 잔잔한 앰비언트",
      "bpm": 70
    },
    "sfx": [
      {"cue": "s1_start", "asset": "은은한 공기 울림"},
      {"cue": "s3_text", "asset": "부드러운 발광 효과음"}
    ]
  },
  "style": ["글래스모피즘", "미니멀", "시네마틱", "블루-화이트 톤"],
  "camera_global": ["과도한 흔들림 없음", "급격한 전환 없음"],
  "negative_prompt": [
    "네온 과다 제외", "타 브랜드 로고 없음", "사람/손 등장 금지",
    "잡동사니 텍스처 제외", "글리치 없음"
  ]
}

이렇게 해서 만든 영상입니다.

Hailuo_Video_Abstract 3D glassmorphism scen_421438711782260745.mp4
781.63KB
VEO3.mp4
1.25MB

Hero 영역에 자동 재생되는 배경으로 아주 잘 어울렸고,
첫인상에서 ‘감각 있는 포트폴리오’라는 느낌을 주기에 좋은 영상이 나왔어요!

물론 조금 더 다듬을 여지는 있지만, 이 시도만으로도 나만의 차별화 포인트를 만들 수 있을 거라는 생각이 들었습니다!

결과와 배운 점

  • 처음엔 ‘기획’이라는 말에 겁먹었는데, PDL 전략과 도구별 역할을 명확히 하니 금방 자신감이 붙었어요 💪

  • 단순한 소개용 페이지가 아니라, AI 도구들을 실제로 활용한 증거로써의 포트폴리오를 만들 수 있어 큰 만족감을 느꼈어요.

  • 무엇보다 ‘내가 나를 어떻게 표현할 것인가’에 대해 고민하게 된 시간이었습니다.

🎯 앞으로는 NanoBanana의 더 다양한 기능을 배워서, 포트폴리오에 더 풍부한 시각적 요소를 담아보고 싶어요!

도움 받은 글

  • 물결님의 랜딩페이지 기획 링크 (수업 자료)

2
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요