콘텐츠·마케팅 섹션

서비스 상태를 여러 겹의 원으로 요약하고 선택한 시스템의 지표와 최근 변화를 보여준다.

선택에 따라 다음 질문과 결과가 달라지는 의사결정 경로를 시각화한다. 지나온 선택을 검토하고 이전 분기로 돌아가 다른 결과를 탐색한다.

멤버·팀·진행률·상태를 밀도 있게 훑는 관리 화면용 테이블. 열 헤더의 버튼으로 활동 수치를 오름·내림차순 전환한다.

뷰 진입 시 0→목표값 카운트업. 초기 렌더는 목표값 그대로라 하이드레이션이 일치한다.

grid 트랙을 0fr에서 1fr로 바꿔 답변 높이를 전환한다. 닫힌 답변도 DOM에 남는다.

아이콘+라벨이 점 구분자로 무한히 흐르는 신뢰 스트립. 순수 CSS, 엣지는 mask 페이드.

별점 + 인용문 + 이니셜 아바타 카드. CSS 멀티컬럼이라 카드 높이가 달라도 빈틈 없이 채워진다(JS 없는 masonry 유사). 아바타 색은 이름 해시라 SSR 안전.

아이콘, 제목, 설명을 격자로 배치하는 기능 소개 섹션. 아이콘은 ReactNode로 받고 열 수는 2열, 3열, 4열 중에서 고른다.

제품 환경 요약과 현재 출시 단계를 하나의 캡슐형 표면에 나란히 표시한다. 좁은 화면에서는 환경 문구를 줄이고 상태를 항상 보이게 유지한다.

얇은 구분선 사이에서 저채도 파트너 워드마크가 한 방향으로 끊김 없이 흐른다. 마우스나 키보드 초점으로 멈출 수 있고 모션 감소 설정에서는 정적 그리드로 바뀐다.

다크 배경에 기술 운영 원칙, 네 가지 역량 카드, 검증 환경과 데이터 규모를 배치한다. 카드에는 동작을 넣지 않고 근거 정보를 읽는 데 집중한다.

대표 프로젝트는 화면 목업과 설명이 있는 카드로 강조하고 나머지는 번호, 제목, 분야, 연도로 정리한다. 카드와 목록 행을 각각 상세 페이지 링크로 사용할 수 있다.

서비스를 선택하는 세 가지 기준과 자주 묻는 질문을 한 섹션에서 보여준다. 원칙은 정적으로 유지하고 FAQ만 네이티브 details 요소로 펼친다.

크기가 제각각인 타일을 도시락처럼 짜맞추는 쇼케이스 섹션. span은 정해진 조합(1x1·2x1·1x2·2x2)만 허용해 4열 배치가 깨지지 않는다. 모바일은 1열 풀폭.

스크롤하면 카드가 화면 위쪽에 하나씩 쌓이고 이전 카드는 뒤로 물러난다. position: sticky로 배치한다.

왼쪽 비주얼은 고정된 채 오른쪽 글을 스크롤하면 장면이 단계별로 바뀐다(애플 제품 페이지 구성). 활성 판정은 화면 중앙 띠 기준 IntersectionObserver.

세로로 스크롤하면 화면이 가로로 흘러간다. 세로 여유분을 트랙의 가로 초과분에 맞춰 계산해 스크롤이 남거나 모자라지 않는다. reduced-motion이면 평범한 가로 스크롤로 전환.

왼쪽 카피 + 오른쪽 비주얼의 랜딩 얼굴. 강조 단어는 h1 안의 <em>이라 별도 span 분해 없이 복사·번역·스크린리더가 자연스럽다. 모바일은 비주얼이 아래로 내려가고 카피가 가운데 정렬.

상단에 고정되는 내비게이션. 스크롤하면 배경이 흐려지고 높이가 줄어든다. 모바일에서는 mobile-drawer 패턴과 연결할 수 있다.

브랜드 + 링크 컬럼 + 소셜 + 저작권. 랜딩의 마무리이자 SEO 내부 링크 허브. 저작권 연도는 소비 측이 넘긴다(서버 계산은 배포 시점에 굳고, 클라 계산은 하이드레이션 불일치).

랜딩 마지막에서 전환을 받아내는 띠. 여기까지 온 사람은 이미 설득됐으므로 새 정보 대신 "지금 하면 된다"만 크게 남긴다. tone 3종(solid·soft·outline)으로 강도 조절.

신규 기능이나 프로모션을 알리는 최상단 한 줄 배너. 닫은 상태를 저장하며 storageKey를 바꾸면 새 공지를 다시 표시할 수 있다.

고객사나 제휴사 로고를 격자로 보여주는 섹션. 기본은 단색으로 표시하고 포인터를 올리면 원래 색으로 바뀐다.

출시나 프로모션 마감까지 남은 시간을 표시한다. 마운트 전에는 자리표시자를 보여주고 다음 초 경계에 맞춰 값을 갱신한다.

최근 글을 카드로 소개하는 섹션. 서버와 브라우저의 날짜 표기 차이를 피하도록 날짜는 표시할 문자열로 받는다.

카피와 비주얼이 좌우로 번갈아 놓이는 지그재그 기능 소개. feature-grid가 "많다"라면 이건 하나하나 크게 설명한다. 방향은 CSS :nth-child(even)가 정해 항목을 지워도 안 뒤집힌다.

히어로를 지나 스크롤한 사람에게 따라붙는 전환 장치. 스크롤 px가 아니라 "기준 요소가 화면에서 사라졌는가"로 판단해(IO) 히어로 CTA와 겹치지 않는다. 닫으면 세션 동안만 숨김.

고객, 도입 내용, 주요 지표, 인용문을 한 카드에 배치한다. 지표는 단위와 지역별 표기를 포함한 문자열로 받는다.

여러 장면을 한 행에 압축하고 선택한 패널만 넓혀 서사를 드러낸다. 모바일에서는 가로 압축 대신 세로 높이 확장으로 바뀌어 같은 마크업을 유지한다.

제품 구조·생태계를 노드와 연결선으로 탐색하는 인터랙티브 맵. 노드를 고르면 연결된 선만 빛나고 설명 카드가 바뀌어, 평면 기능 그리드와 다른 관계 중심 설명이 가능하다.