브랜드 웹사이트 · 어드민
브랜드 웹사이트 · 어드민
베론파트너스 브랜드 웹사이트는 랜딩 페이지·포트폴리오 상세·관리자 페이지를 하나로 묶은 프로젝트입니다. 삼성·페라리·디올 등 5개 산업 40여 개 브랜드를 고객사로 둔 마케팅 통합 솔루션 기업인 만큼, 대기업·프리미엄 브랜드의 마케팅 의사결정자를 타깃으로 '신뢰 형성 → 즉시 문의'를 설계 기준으로 삼았습니다. 화이트·네이비·골드 배색과 명조 서체로 톤을 통일한 원페이지 랜딩 위에 Capabilities 4개 영역을 각기 다른 포트폴리오 형식(텍스트 카드·슬라이더·PDF 뷰·그리드)으로 풀어내고, Partners에서 문의로 이어지는 흐름을 최소 입력 폼으로 설계했습니다. 랜딩과 관리자 페이지는 Supabase 하나를 공유합니다. 어드민에서 등록한 포트폴리오·파트너사는 랜딩에 바로 노출되고, 랜딩에서 들어온 문의는 어드민 문의함으로 모입니다. 포트폴리오 상세는 SSR로 전환해 검색 노출을 확보하고, GA4 이벤트 16종으로 문의 퍼널을 단계별로 측정합니다.
베론파트너스 브랜드 웹사이트는 랜딩 페이지·포트폴리오 상세·관리자 페이지를 하나로 묶은 프로젝트입니다. 삼성·페라리·디올 등 5개 산업 40여 개 브랜드를 고객사로 둔 마케팅 통합 솔루션 기업인 만큼, 대기업·프리미엄 브랜드의 마케팅 의사결정자를 타깃으로 '신뢰 형성 → 즉시 문의'를 설계 기준으로 삼았습니다. 화이트·네이비·골드 배색과 명조 서체로 톤을 통일한 원페이지 랜딩 위에 Capabilities 4개 영역을 각기 다른 포트폴리오 형식(텍스트 카드·슬라이더·PDF 뷰·그리드)으로 풀어내고, Partners에서 문의로 이어지는 흐름을 최소 입력 폼으로 설계했습니다. 랜딩과 관리자 페이지는 Supabase 하나를 공유합니다. 어드민에서 등록한 포트폴리오·파트너사는 랜딩에 바로 노출되고, 랜딩에서 들어온 문의는 어드민 문의함으로 모입니다. 포트폴리오 상세는 SSR로 전환해 검색 노출을 확보하고, GA4 이벤트 16종으로 문의 퍼널을 단계별로 측정합니다.
Problem
베론파트너스는 삼성·KT·페라리·디올·CJ제일제당 등 5개 산업 40여 개 브랜드를 고객사로 둔 마케팅 통합 솔루션 기업입니다. 레퍼런스는 충분했지만, 그 위상을 보여줄 온라인 접점이 없었습니다. 방문자는 대기업 마케팅 임원부터 럭셔리 브랜드 팀장까지 30~50대 의사결정자였습니다. 이들은 짧은 탐색 안에서 '맡겨도 되는 회사인가'를 판단하고, 판단이 서면 그 자리에서 문의로 넘어갑니다. 포트폴리오와 파트너사 라인업이 그 판단 근거가 되어야 했고, 문의까지의 거리는 최대한 짧아야 했습니다.
탐색이 신뢰가 되고 신뢰가 문의가 되는 흐름을 한 페이지 안에서 설계하고, 그 근거가 되는 포트폴리오를 담당자가 직접 관리할 수 있는 구조가 필요했습니다.
Problem
베론파트너스는 삼성·KT·페라리·디올·CJ제일제당 등 5개 산업 40여 개 브랜드를 고객사로 둔 마케팅 통합 솔루션 기업입니다. 레퍼런스는 충분했지만, 그 위상을 보여줄 온라인 접점이 없었습니다. 방문자는 대기업 마케팅 임원부터 럭셔리 브랜드 팀장까지 30~50대 의사결정자였습니다. 이들은 짧은 탐색 안에서 '맡겨도 되는 회사인가'를 판단하고, 판단이 서면 그 자리에서 문의로 넘어갑니다. 포트폴리오와 파트너사 라인업이 그 판단 근거가 되어야 했고, 문의까지의 거리는 최대한 짧아야 했습니다.
탐색이 신뢰가 되고 신뢰가 문의가 되는 흐름을 한 페이지 안에서 설계하고, 그 근거가 되는 포트폴리오를 담당자가 직접 관리할 수 있는 구조가 필요했습니다.
Solution & Key Features
화이트·네이비·골드 3색과 나눔명조로 톤을 통일하고 Hero → About → Capabilities → Partners → Inquiry를 한 페이지에 이어 붙였습니다. Hero는 시간차 디졸브로 열리고 섹션마다 페이드인·슬라이드업 모션이 붙으며, 네비게이션 토글 하나로 전체 텍스트가 KOR/ENG로 즉시 전환됩니다. 1440·768·390 세 중단점에 맞춰 모바일에서는 햄버거 메뉴와 1열 스택으로 바뀝니다.
마케팅 컨설팅·미디어·익스피리언스·디지털 네 영역을 각각의 전문성이 드러나도록 따로 설계했습니다. 요약을 먼저 보여주고 스크롤에 따라 상세 설명이 순차적으로 등장하며, 좌우로 텍스트와 이미지를 번갈아 배치해 긴 원페이지에도 리듬이 생기도록 했습니다.
CTA 버튼 하나로 포트폴리오를 숨겨두면 누르지 않고 지나칩니다. 그래서 영역마다 형식을 달리했습니다 — 컨설팅은 텍스트 카드 3열로, 미디어는 호버 시 영상이 재생되는 가로 슬라이더로, 익스피리언스는 PDF 프레젠테이션 뷰로, 디지털은 캠페인 성과가 보이는 그리드로 풀었습니다. 카드를 누르면 SSR로 렌더링되는 상세 페이지로 이동해 OG 미리보기와 sitemap까지 자동으로 반영됩니다.
파트너사 라인업을 보고 가장 마음이 움직인 지점에서 바로 문의로 이어지도록 Partners 다음에 Inquiry를 붙였습니다. 로고 대신 텍스트로 형식을 통일해 40여 개 브랜드를 한 화면에 담고, 폼은 이름·연락처·이메일만 필수로 두었습니다. 캠페인 유형은 클릭으로 다중 선택하고 레퍼런스는 URL이나 파일로 첨부하며, 실시간 유효성 검사와 제출 후 안내 메시지로 이탈 지점을 하나씩 줄였습니다.
랜딩과 관리자 페이지가 Supabase 하나를 공유합니다. 어드민에서 포트폴리오를 등록하면 랜딩 갤러리와 상세 페이지에 바로 반영되고, 비공개로 먼저 올린 뒤 순서를 정해 공개할 수 있습니다. 랜딩에서 들어온 문의는 서버 라우트를 거쳐 저장되고 담당자 메일로 즉시 발송되며, 고객 개인정보는 RLS로 막아 관리자만 조회합니다. 이미지·PDF는 브라우저에서 스토리지로 직접 올라갑니다.
Solution & Key Features
화이트·네이비·골드 3색과 나눔명조로 톤을 통일하고 Hero → About → Capabilities → Partners → Inquiry를 한 페이지에 이어 붙였습니다. Hero는 시간차 디졸브로 열리고 섹션마다 페이드인·슬라이드업 모션이 붙으며, 네비게이션 토글 하나로 전체 텍스트가 KOR/ENG로 즉시 전환됩니다. 1440·768·390 세 중단점에 맞춰 모바일에서는 햄버거 메뉴와 1열 스택으로 바뀝니다.
마케팅 컨설팅·미디어·익스피리언스·디지털 네 영역을 각각의 전문성이 드러나도록 따로 설계했습니다. 요약을 먼저 보여주고 스크롤에 따라 상세 설명이 순차적으로 등장하며, 좌우로 텍스트와 이미지를 번갈아 배치해 긴 원페이지에도 리듬이 생기도록 했습니다.
CTA 버튼 하나로 포트폴리오를 숨겨두면 누르지 않고 지나칩니다. 그래서 영역마다 형식을 달리했습니다 — 컨설팅은 텍스트 카드 3열로, 미디어는 호버 시 영상이 재생되는 가로 슬라이더로, 익스피리언스는 PDF 프레젠테이션 뷰로, 디지털은 캠페인 성과가 보이는 그리드로 풀었습니다. 카드를 누르면 SSR로 렌더링되는 상세 페이지로 이동해 OG 미리보기와 sitemap까지 자동으로 반영됩니다.
파트너사 라인업을 보고 가장 마음이 움직인 지점에서 바로 문의로 이어지도록 Partners 다음에 Inquiry를 붙였습니다. 로고 대신 텍스트로 형식을 통일해 40여 개 브랜드를 한 화면에 담고, 폼은 이름·연락처·이메일만 필수로 두었습니다. 캠페인 유형은 클릭으로 다중 선택하고 레퍼런스는 URL이나 파일로 첨부하며, 실시간 유효성 검사와 제출 후 안내 메시지로 이탈 지점을 하나씩 줄였습니다.
랜딩과 관리자 페이지가 Supabase 하나를 공유합니다. 어드민에서 포트폴리오를 등록하면 랜딩 갤러리와 상세 페이지에 바로 반영되고, 비공개로 먼저 올린 뒤 순서를 정해 공개할 수 있습니다. 랜딩에서 들어온 문의는 서버 라우트를 거쳐 저장되고 담당자 메일로 즉시 발송되며, 고객 개인정보는 RLS로 막아 관리자만 조회합니다. 이미지·PDF는 브라우저에서 스토리지로 직접 올라갑니다.
