[내일 배움 캠프] 53일

TIL | 스토브리그 랜딩페이지 방향 잡기

오늘은 프레이머로 만들 랜딩페이지의 방향성을 구체적으로 정리하는 데 집중했다. 처음에는 단순히 좋아하는 드라마를 소개하는 페이지를 만들고 싶다는 생각에서 시작했지만, 이야기를 정리하다 보니 결국 중요한 건 단순한 정보 나열이 아니라 드라마의 분위기와 감정선을 어떻게 웹페이지로 번역할 것인가라는 점이라는 걸 더 분명하게 느꼈다.

주제로는 내가 좋아하는 드라마인 스토브리그를 선택했다. 스토브리그는 일반적인 스포츠 드라마처럼 경기의 역동성만 강조되는 작품이 아니라, 전략, 리더십, 팀워크, 신뢰, 성장, 그리고 무너진 팀을 다시 세워가는 과정이 인상적인 드라마다. 그래서 랜딩페이지 역시 단순한 팬페이지나 정보 페이지보다는, 작품이 가진 묵직한 긴장감과 차가운 분위기, 그리고 그 안에서 느껴지는 희망을 담아내는 방향이 더 어울린다고 판단했다.

이 과정을 통해 프레이머에서 사용할 프롬프트도 처음부터 다시 정리했다. 단순히 “드라마 소개 페이지를 만들어줘”라고 쓰는 것보다, 페이지의 목적, 분위기, 포함할 섹션, 반응형 구조, 헤더 네비게이션, 색상 기준까지 구체적으로 적어주는 것이 훨씬 더 원하는 결과에 가까운 초안을 만들 수 있다는 점을 배웠다. 특히 랜딩페이지는 한눈에 분위기를 전달하는 것이 중요하니, 텍스트 정보보다도 히어로 섹션, 스크롤 흐름, 이미지 중심 레이아웃, 섹션 간 리듬감을 먼저 생각해야 한다는 감각도 생겼다.

헤더 네비게이션도 함께 고민했다. 단순한 메뉴 배치가 아니라, 작품 흐름을 따라 자연스럽게 이동할 수 있도록 메뉴 순서를 구성하는 것이 중요했다. 그래서 드라마 소개, 등장인물, 스토리, 매력 포인트, 명장면, 추천 섹션처럼 페이지 전체 흐름과 맞닿는 구조로 정리했다. 이 과정에서 헤더는 단순한 기능 요소가 아니라, 페이지의 첫인상과 전체 톤을 잡아주는 중요한 장치라는 점도 다시 느꼈다.

색감도 꽤 오래 고민했다. 처음에는 다크 네이비 기반으로 생각했지만, 이야기하다 보니 스토브리그라는 작품의 분위기를 더 잘 살리려면 드림즈 팀컬러를 기반으로 재해석하는 것이 더 مناسب하다는 결론에 도달했다. 그래서 전체 페이지는 아주 어두운 딥그린 계열을 베이스로 두고, 섹션 구분용 컬러와 카드 배경, 텍스트 컬러까지 단계적으로 정리해보았다. 특히 섹션 구분용 컬러를 #276146로 정한 뒤, 그 위에서 잘 읽히는 텍스트 컬러까지 함께 맞추면서 단순히 예쁜 색을 고르는 것이 아니라 가독성과 분위기를 동시에 고려하는 방식으로 접근해볼 수 있었다.

오늘 작업을 하면서 느낀 건, 랜딩페이지를 만드는 일은 단순히 예쁜 화면을 구성하는 것이 아니라 콘텐츠의 성격과 감정을 시각 언어로 풀어내는 과정이라는 점이다. 스토브리그의 차갑고 묵직한 공기, 조용한 긴장감, 그리고 다시 시작하는 사람들의 열기를 어떻게 화면 안에 담을지 고민하면서, 디자인에서도 결국 중요한 건 겉모습만이 아니라 그 안에 담긴 이야기라는 걸 다시 생각하게 됐다.

오늘은 프레이머에서 바로 사용할 수 있는 랜딩페이지 프롬프트와 함께, 헤더 네비게이션 구조, 색상 시스템, 섹션 배경과 텍스트 대비까지 전체적인 방향성을 꽤 구체적으로 잡을 수 있었다. 아직 실제 화면으로 구현해보는 단계는 남아 있지만, 적어도 이제는 어떤 감정과 분위기를 목표로 해야 하는지 분명해졌다는 점에서 의미 있는 작업이었다.