웹기술 도감 › 구조 레퍼런스

웹 구조 레퍼런스

실제 사이트가 페이지를 어떻게 나누고, 첫 화면에 무엇을 두고, 어떤 기능으로 사람을 붙잡는지 — 겉모습이 아니라 구조를 데이터로 분해합니다.

콘텐츠 카탈로그형

많은 항목을 분류·검색·정렬로 탐색하고 상세로 들어가는 구조. 콘텐츠 양이 곧 가치라 목록 페이지가 홈이 된다.

방문 즉시 입력(파일·상황·선택)을 받고 결과를 돌려주는 구조. 첫 화면에 도구 자체가 놓이고, 콘텐츠는 보조다.

주기적으로 갱신되는 "오늘의 내용"이 홈이고, 지난 것은 아카이브로 쌓이는 구조. 구독 채널(알림)과 짝을 이룬다.

게시물이 아니라 지금 유효한 항목만 보여주는 구조. 목록이 수시로 갱신되고 상세 페이지 없이 외부로 바로 보낸다.

지금 유효한 특가만 카드 그리드로 보여주는 실시간 피드. 상세 페이지가 없고 카드를 누르면 외부(쉐어링크)로 바로 나간다. 클릭당 크레딧 적립(링크당 1회)으로 로그인 유인을 만든 것이 구조의 핵심.

홈이 "오늘의 브리핑" 한 장 — 시장 지표 보드와 최신 브리핑 요약이 먼저, 지난 브리핑은 블로그 아카이브로 쌓인다. 텔레그램 채널 구독 CTA를 상단에 둬서 재방문 대신 푸시로 관계를 만든다.

파일 드롭존이 첫 화면의 전부인 순수 도구형. 처리 결과(문서 뷰)가 같은 화면에서 열리고, 보관함·개발자 API 페이지를 곁가지로 단다. "파일은 서버로 안 간다"는 신뢰 문구를 드롭존 옆에 붙이는 게 전환의 핵심.

홈이 곧 도구 — 오늘의 처방 카드가 먼저 보이고, 상황 태그를 고르면 맞춤 처방을 돌려준다. 로그인 없이 쓰게 두고, 공유로 재방문을 만든다. 상세 페이지 대신 결과 화면이 콘텐츠 단위다.

웹 기능 1,600여 개를 Baseline 지원 상태와 함께 검색·카테고리·페이지네이션으로 탐색하는 도감. 홈 상단에 큐레이션 데모("이렇게까지 된다")를 배치해 카탈로그 진입 전에 흥미를 만든다.

AI 용어 91개를 대주제 분류·검색으로 탐색하는 사전. 본문 안의 용어가 위키식으로 자동 링크되고, 용어 사이 관계를 그래프 페이지로 시각화한 것이 차별점. 백링크로 항목 간 순환 탐색을 만든다.

프롬프트·개발 패턴을 카테고리별 목록으로 탐색하고 상세에서 복사해 가는 카탈로그. 커뮤니티 제출 폼과 관리자 검수로 콘텐츠가 늘어나는 구조가 특징.

심리테스트 28종을 유형 필터와 인기·트렌디 정렬로 고르는 카탈로그. 실행 페이지는 문항 진행 → 결과 화면 구조이고, 결과가 색상 카드라 공유가 자연스럽다. 결과 유형 페이지를 개별 URL로 분리해 롱테일 검색을 받는다.