AI 브랜드 보호 기업 랜딩 리뉴얼
AI 브랜드 보호 기업의 메인 랜딩을 레고 블록형 섹션 9종(배너·숫자 띠·카드 그리드·탭 전환·좌우 교차·로고 슬라이더·사례 슬라이더·문의 띠)으로 리뉴얼하는 프로젝트입니다.
프로젝트 개요
AI 브랜드 보호 기업의 메인 랜딩을 레고 블록형 섹션 9종(배너·숫자 띠·카드 그리드·탭 전환·좌우 교차·로고 슬라이더·사례 슬라이더·문의 띠)으로 리뉴얼하는 프로젝트입니다. 모든 섹션은 하나의 블록 JSON 스키마와 공용 렌더러로 그려지며, 관리 콘솔(포트폴리오 2)에서 바꾼 구성이 같은 블록 데이터로 이 화면에 반영됩니다. React와 Tailwind CSS로 PC·태블릿·모바일 반응형을 구현합니다.
작업 범위
- 메인: 깊은 브랜드 면 히어로 아래에 걸친 위조 의심 탐지 현황 카드가 마켓 칩으로 걸러지고, 이어서 핵심 가치 숫자와 블록형 섹션이 이어지는 메인 랜딩 화면을 구현합니다
- 핵심 기술: 이미지 판독, 판매자 패턴 분석, 삭제 요청 자동화 세 기술을 같은 규격의 카드로 소개하고 카드를 누르면 블록 규격이 펼쳐집니다
- 서비스 흐름: 탐지·분석·삭제 요청 세 단계를 탭으로 전환하며 각 단계의 처리 방식과 화면 목업을 보여 주는 탭 전환형 블록을 구현합니다
- 도입 사례: 고객사 로고 슬라이더, 분야 필터가 붙은 사례 카드 그리드, 사례 슬라이더를 한 화면에 구성합니다
주요 업무
- 메인 화면: 블록 JSON 배열을 공용 렌더러가 순서대로 그리며, 탐지 카드·숫자 띠는 하나의 데이터 상수에서 계산한 값을 읽습니다
- 핵심 기술 화면: 카드마다 제목·본문·이미지 슬롯 수를 가진 동일 스키마를 사용해 어떤 순서로 놓아도 모양이 어긋나지 않게 설계합니다
- 서비스 흐름 화면: 탭 키와 내용이 블록 데이터의 items 배열에서 나오므로 탭 수를 늘려도 코드 수정이 없습니다
- 도입 사례 화면: 슬라이더는 scroll-snap 기반으로 터치와 버튼 이동을 모두 지원하고 카드 그리드는 분야 필터 칩으로 걸러집니다
프로젝트 핵심 과제
블록 순서가 바뀌어도 어두운 면과 밝은 면의 번갈아 놓이는 리듬이 깨지지 않도록 블록별 바탕 규칙을 설계할 필요가 있으며
블록 단위 톤 속성으로 대응합니다
슬라이더 블록이 터치·버튼·키보드 입력을 모두 지원하
scroll-snap 기반 구조를 설계할 필요가 있습니다
히어로에 걸친 탐지 카드가 모바일에서 겹치지 않
카드 배치 규칙을 단계별로 설계할 필요가 있습니다
기존 자체 구축 서버의 스택이 확정되지 않아 소스 분석 후 렌더 모듈 연동 지점을 정해야 하며
블록 렌더러를 독립 모듈로 두어 대응합니다
핵심 기능 상세
메인
깊은 브랜드 면 히어로 아래에 걸친 위조 의심 탐지 현황 카드가 마켓 칩으로 걸러지고, 이어서 핵심 가치 숫자와 블록형 섹션이 이어지는 메인 랜딩 화면을 구현합니다.
- 블록 type 값으로 컴포넌트를 선택하는 레지스트리 렌더러(React) 구성
- 탐지 건 목록을 마켓 칩 필터와 선택 상태로 관리하는 Custom Hook 설계
- Tailwind CSS 중단점 3단(375·768·1440)으로 히어로·카드 그리드 재배치
블록 데이터만 바꾸면 히어로부터 문의 띠까지 같은 렌더러로 다시 그려지는 구조로, 디자인 일관성을 코드로 보장합니다.
핵심 기술
이미지 판독, 판매자 패턴 분석, 삭제 요청 자동화 세 기술을 같은 규격의 카드로 소개하고 카드를 누르면 블록 규격이 펼쳐집니다.
- 카드 블록 스키마(title, body, media, cta)를 JSON Schema로 정의하고 렌더 전 검증
- 펼침 영역을 aria-expanded 기반으로 구현해 키보드 조작 지원
- 좌우 교차 블록은 order 값 하나로 이미지 위치를 뒤집는 CSS Grid로 구성
독립 모듈로 규격화한 블록이라 순서를 바꿔도 여백·글자 단계가 같게 유지됩니다.
서비스 흐름
탐지·분석·삭제 요청 세 단계를 탭으로 전환하며 각 단계의 처리 방식과 화면 목업을 보여 주는 탭 전환형 블록을 구현합니다.
- 탭 상태를 주소 해시와 동기화해 새로고침 후에도 같은 탭 유지
- 탭 패널 전환에 CSS transition과 inert 속성을 함께 적용
- items 배열 기반 동적 렌더링으로 탭 수 가변 지원
탭 전환형 블록 하나가 데이터만 바꿔 다른 페이지에서도 재사용되는 구조를 보여 줍니다.
도입 사례
고객사 로고 슬라이더, 분야 필터가 붙은 사례 카드 그리드, 사례 슬라이더를 한 화면에 구성합니다.
- CSS scroll-snap과 IntersectionObserver로 슬라이더 현재 위치 표시
- 사례 데이터를 분야 키로 필터링하는 메모이즈된 셀렉터 구성
- 로고는 SVG 글자 마크로 구성해 해상도와 무관하게 선명하게 표시
같은 사례 데이터를 그리드와 슬라이더 두 블록이 함께 읽어 숫자와 문구가 어긋나지 않게 합니다.
프로젝트 진행 단계
블록 JSON 스키마·렌더러 설계 · 2026.11
블록 type별 필드 정의, JSON Schema 검증, 레지스트리 렌더러 구조 설계
표준 섹션 블록 8종 퍼블리싱 · 2026.11
배너·숫자 띠·카드 그리드·탭·좌우 교차·슬라이더 2종·문의 띠를 React 컴포넌트로 구현
메인 랜딩 조립과 모션 적용 · 2026.11
히어로·걸친 탐지 카드 조립, 등장 모션과 숫자 카운트 구현
반응형 보정과 기존 서버 연동 준비 · 2026.11
3단 중단점 보정, 기존 소스 분석 후 렌더 API 연동 지점 정리
개발 결과
기술적 주안점
- 블록 데이터만 바꾸면 히어로부터 문의 띠까지 같은 렌더러로 다시 그려지는 구조로, 디자인 일관성을 코드로 보장합니다
- 독립 모듈로 규격화한 블록이라 순서를 바꿔도 여백·글자 단계가 같게 유지됩니다
- 탭 전환형 블록 하나가 데이터만 바꿔 다른 페이지에서도 재사용되는 구조를 보여 줍니다
