웹기술 도감 › 구조 레퍼런스
웹 구조 레퍼런스
실제 사이트가 페이지를 어떻게 나누고, 첫 화면에 무엇을 두고, 어떤 기능으로 사람을 붙잡는지 — 겉모습이 아니라 구조를 데이터로 분해합니다.
콘텐츠 카탈로그형
8건많은 항목을 분류·검색·정렬로 탐색하고 상세로 들어가는 구조. 콘텐츠 양이 곧 가치라 목록 페이지가 홈이 된다.
도구형
8건방문 즉시 입력(파일·상황·선택)을 받고 결과를 돌려주는 구조. 첫 화면에 도구 자체가 놓이고, 콘텐츠는 보조다.
브리핑·아카이브형
8건주기적으로 갱신되는 "오늘의 내용"이 홈이고, 지난 것은 아카이브로 쌓이는 구조. 구독 채널(알림)과 짝을 이룬다.
실시간 피드형
8건게시물이 아니라 지금 유효한 항목만 보여주는 구조. 목록이 수시로 갱신되고 상세 페이지 없이 외부로 바로 보낸다.
전체 레퍼런스
멜론차트
음악 서비스 멜론의 차트 섹션으로, 첫 화면은 헤더 검색창 아래 TOP100/HOT100/일간/주간/월간 탭과 '2026.10.03 09:00' 기준 시각, 시간선택·새로고침 버튼이고 그 아래 순위·등락·곡정보·좋아요·듣기·담기·다운·뮤비 열로 된 100행 목록이 매시간 갱신된다. 상단에 전체듣기·셔플듣기·담기 같은 일괄 액션을 두고, 일간 차트는 장르 탭으로 다시 거른다. 곡 상세는 가사·작사작곡·영상·댓글·유사곡 목록을 가진 별도 페이지지만 차트 자체의 흐름은 목록에서 바로 재생·담기로 끝난다.
Remote OK
첫 화면은 '채용 공고 올리기' 배너 아래 검색·지역 입력창, 급여 슬라이더·복지·정렬(최신/고연봉/조회/지원/인기)·직군 태그 필터, 그리고 회사 로고·제목·지역·급여·태그·경과 시간·Apply 버튼이 한 행인 공고 목록이다. 스크롤하면 49개가 99개로 늘어나는 무한 스크롤이고, 공고 상세는 별도 페이지가 아니라 같은 목록 안에서 해당 행이 펼쳐진 형태(URL만 /remote-jobs/[slug])로 공유 버튼과 '이 회사의 다른 공고'를 붙인다. 공고 등록(/hire-remotely)은 긴 입력 폼이며, JSON 피드와 API 링크를 메뉴에 노출한다.
GitHub Status
첫 화면은 'Subscribe to Updates' 버튼과 'All Systems Operational' 한 줄, 그 아래 Git Operations·API·Actions 등 컴포넌트별 상태 배지와 90일 가동률 바가 나열되는 보드다. 이어서 'Past Incidents'가 날짜별로 내려오며 오늘부터 과거로 비어 있는 날도 '사고 없음'으로 채운다. 사고 상세(/incidents/[id])는 Resolved→Investigating 순의 업데이트 타임라인과 그 사고만 구독하는 버튼이 전부이고, 구독 모달은 이메일·SMS·Slack·웹훅 4종을 탭으로 나눈다.
GitHub Trending
첫 화면은 'Trending' 제목과 한 줄 설명, Repositories/Developers 탭, Spoken Language·Language·Date range 드롭다운이고 그 아래 저장소 25개가 순위 없이 '오늘 N stars' 수치와 함께 나열된다. 상세 페이지가 따로 없고 각 행은 저장소 페이지로 바로 나가며, Star 버튼이 행 안에 붙어 있다. 언어·기간은 /trending/[language]?since=weekly 처럼 경로와 쿼리로 바뀌고, Developers 탭은 같은 틀에 사람 목록을 넣는다.
알구몬
루트가 /n/deal 로 넘어가며 첫 화면은 검색창, 최신/랭킹/댓글들/포럼 탭, 정렬·기간·필터 버튼과 카테고리 칩, 1열/2열 보기 토글이고 그 아래 몇 분 전 단위로 갱신되는 핫딜 카드가 쌓인다. 카드는 쇼핑몰·출처 커뮤니티·가격·배송·'N명 보는중'·사고싶다/샀어요·댓글 수·키워드 알림·공유 버튼을 담고, 외부 상품은 /n/d/[id] 리다이렉트로 바로 보낸다. 목록 사이에 포럼 글, '지금 많이 보는중/최근 많이 샀어요', 인기 댓글 블록이 끼어 있고, 얇은 상세(/n/deal/[id])는 같은 카드에 '최근 유사한 딜'과 댓글만 더한다.
GeekNews(긱뉴스)
헤더에 검색창·로그인·글등록을 두고 첫 화면은 투표 화살표가 붙은 20개 토픽 목록이다. 각 항목은 제목(외부 원문 링크)과 한국어 요약 두 줄, 점수·작성자·시간·댓글 수로 구성되고 목록 끝의 '토픽 더 불러오기'가 /?page=2 로 이어진다. 상세(/topic?id=)는 요약 본문과 댓글 트리, 로그인 없이 보이는 댓글 입력폼이며, 글등록은 로그인 폼으로 넘긴다. Weekly(/weekly)는 이 피드를 주간 이메일 브리핑으로 묶어 아카이브하고, 화면 모드 전환과 다국어 서브도메인, Slack·Discord 등 봇 연동을 푸터에 노출한다.
Hacker News
홈은 설명 없이 순위 번호가 붙은 30개 링크 목록이 첫 화면이며 제목은 외부 원문으로 바로 간다. 각 행에 점수·작성자·시간·hide·댓글 수가 한 줄로 붙고, 목록 끝에는 'More' 링크 하나와 푸터의 검색 입력창이 있다. 상세(/item?id=)는 같은 한 줄 메타 아래 댓글 트리와 댓글 입력폼이 전부이고, 과거 날짜 목록(/front)은 '하루·한 달·일 년 전으로' 링크로 넘긴다. 글 등록은 로그인 폼으로 막혀 있다.
1440
홈은 브리핑 본문이 아니라 랜딩이다. 헤더에 지식 베이스 검색창과 Sign In / Create Account를 두고, 첫 화면에 Daily Digest 이메일 구독 폼, 이어서 Daily Newsletter·Topic Deep Dives·Podcast·Video 4개 가치 카드, Curate→Summarize→Distill 3단계, 454만 독자·4.8 평점·독자 후기 블록이 내려온다. 당일 호는 /today 가 /newsletter/1440-dd-날짜 로 리다이렉트되는 고정 URL이며, 호 페이지는 'Share Page' 버튼, 섹션 점프 내비, 긴 본문, 하단 'Previous Edition' 링크와 구독 박스로 구성된다.
뉴닉
홈 상단에 정치·경제·세계 등 카테고리 탭 내비를 깔고, 첫 화면부터 대표 기사 1건과 최신 기사 카드 목록이 나온다. 하단에는 '지금 무료 구독하기' 띠가 떠 있고, 헤더의 '시간없슴? 이것만 보슴!'은 매일 갱신되는 요약 브리핑 모드로 들어가는 별도 진입점이다. 기사 페이지는 본문 중간에 로그인 월을 세우고 그 뒤로 좋아요·5점 평가, 관련 태그, 관련 글, 독자 투표, TOP 3 순위를 차례로 붙인다. 구독 페이지는 93만 명 수치 뒤에 레터 3종을 요일표와 함께 나열하고 레터 선택 + 이메일 폼으로 끝난다.
순살브리핑
홈이 곧 '오늘자 뉴스레터'다. 날짜 제목 아래 S&P·코스피·환율 등 시장 지표 보드를 먼저 두고, 그날 호 본문을 접힌 상태로 보여주며 '전체 보기'로 펼친다. 이어서 순살차트 미리보기, 날짜별 지난 뉴스레터 목록(스토리 제목 5개씩), 텔레그램·순살톡·카드뉴스로 가는 블록이 따른다. 호 페이지는 상단 스토리 목차에서 #story-N 앵커로 점프하고, 로그인 없이 리액션·한마디를 남기면 브라우저에만 저장된다.
어피티
헤더에 검색창과 '구독' 버튼을 고정하고, 홈 첫 화면은 '매일 아침 받아보는 경제 뉴스레터 · 115만 명' 문구와 이메일 가입 폼이다. 그 아래로 이번 주 뉴스레터, 뉴스, 유튜브, 칼럼, 머니레터·잘쓸레터 순으로 카드 목록이 이어지며 모두 '더 보기'로 섹션별 아카이브에 연결된다. 레터별 아카이브는 가입 폼을 먼저 두고 지난 호를 93페이지 숫자 페이지네이션으로 나열하고, 호 페이지는 상단에 코스피·환율 수치 블록을 넣은 본문 뒤에 공유 버튼, 이전/다음 글, 최근 레터 목록, 다시 가입 폼이 따른다.
Sidebar
홈은 '매 평일 디자인 링크 5개'라는 한 줄 태그라인 아래 날짜별로 묶인 링크 5개씩이 바로 나오고, 첫 날짜 묶음 뒤에 뉴스레터 가입 폼이 끼어 있다. 항목은 /out?url= 리다이렉트로 외부 원문에 보내며 사이트 내 상세 페이지가 없고, 카테고리 태그가 곧 필터 페이지로 이어진다. 아카이브는 'Load More (20/24863)' 버튼으로 이어 붙이고, 링크 제출은 로그인 후에만 가능하다.
JavaScript Weekly
홈은 제목·한 줄 소개·발행 호수와 이메일 구독 폼이 전부이고, 그 아래에 최신 호 본문을 iframe(/issues/804?layout=bare)으로 그대로 끼워 넣는다. 전체 호 목록(/issues)은 페이지네이션 없이 615개 호를 한 페이지에 제목으로 나열하고, 호 페이지는 이메일 본문 그대로를 웹에 올린 뒤 하단에 이전 호 링크만 둔다. 상단 내비는 Latest Issue / All Issues / RSS 세 개뿐이다.
TLDR
홈 첫 화면은 '5분 안에 테크 따라잡기' 타이틀과 이메일 구독 폼, 800만 구독자 수치이고 그 아래로 당일 뉴스레터에 실린 기사 링크가 외부 원문으로 바로 이어지는 긴 목록이 붙는다. 뉴스레터별 아카이브(/tech/archives)는 날짜 링크만 나열하고, 날짜 페이지가 곧 그날 호의 본문이며 상·하단에 다시 구독 폼을 둔다. 항목마다 '상세 펼침'과 '링크 복사' 버튼, j/k 키보드 탐색, 라이트/다크 전환이 있다.
Notion 마켓플레이스(템플릿)
홈 상단에 종류 탭(템플릿·스킬·에이전트·컨설턴트)과 검색바를 한 줄로 두고, 아래는 추천 카드와 '분류 이름 + 템플릿 개수' 카드를 번갈아 쌓아 분류 페이지로 흘려보낸다. 분류 페이지는 경로 표시 → 제목·설명 → 필터 4개(제작자·가격·언어·정렬) → 카드 그리드 → 번호 페이지 → FAQ 순이다. 상세는 미리보기 옆에 설명·분류·공유를 두고 화면 아래에 '템플릿 사용하기' 버튼을 고정한 채, 평점·리뷰와 같은 제작자·비슷한 템플릿으로 이어진다.
Lucide
홈은 짧은 랜딩이지만 제목 바로 밑에 아이콘 검색바를 넣어 목록으로 곧장 들어가게 한다. 목록 페이지는 왼쪽에 색·굵기·크기 조절기와 분류 목록을 고정하고 오른쪽에 검색바 + 아이콘 격자를 두며, 조절값이 격자 전체에 즉시 반영된다. 상세로 가도 왼쪽 패널은 그대로 남고, 복사 버튼과 '비슷한 아이콘' 탭이 붙는다.
만개의레시피
머리말에 큰 검색바와 인기 검색어를 고정하고, 홈은 주제별 가로 캐러셀(모음·TV레시피·쉐프·명예의전당·동영상·매거진)을 여러 단 쌓은 뒤 분류표와 베스트 순위로 끝난다. 분류 페이지는 종류·상황·재료·방법 네 축을 한 번에 펼쳐 놓고 조합해 거르게 하며 번호 페이지로 넘긴다. 상세는 재료 → 조리순서 → 후기·댓글 뒤에 연관 레시피 묶음을 길게 붙여 이탈을 막는다.
눈누
홈에 소개 문구 없이 바로 폰트 카드 묶음(유료 마켓·신규 추천·바탕체·고딕체)이 이어지고, 맨 아래에 '모든 폰트 보기' 버튼 하나로 전체 목록에 보낸다. 카드마다 미리보기 문구를 직접 고쳐 써 볼 수 있고, 목록 페이지에서는 문구·크기를 한 번 넣으면 모든 카드에 반영된다. 상세 페이지는 미리 써보기 → 라이선스 표 → 비슷한 폰트 → 웹폰트 코드 순으로 '써도 되는지'를 먼저 답한다.
사람인 취업TOOL
채용 포털 안에 도구 10종을 한 묶음으로 넣은 구조다. 모든 도구 페이지가 '제목 → 도구 전환 탭 → 왼쪽 입력·오른쪽 결과' 틀을 똑같이 쓰고, 결과 칸은 입력 전에도 0 값으로 미리 보인다. 도구 바로 아래에는 채용공고 목록을 붙여 본 서비스로 돌려보낸다.
Excalidraw
홈이 곧 빈 캔버스다. 가운데에 로고·저장 안내 한 문단과 바로가기 네 줄(열기·도움말·실시간 협업·가입)만 떠 있고, 그리기 시작하면 사라진다. 내보내기·테마·언어·검색 같은 기능은 전부 왼쪽 위 메뉴 하나에 접어 두었고, 도형 라이브러리 목록과 유료판 소개는 별도 서브도메인으로 떼어 냈다.
Coolors
홈은 도구가 아니라 랜딩이다. 큰 제목과 버튼 두 개(생성기 시작 / 팔레트 탐색)로 갈림길을 만들고, 아래에 도구 목록을 카드로 나열한다. 생성기 페이지는 머리말 없이 화면 전체가 색 기둥 다섯 개와 얇은 도구 줄뿐이고, 만든 팔레트가 곧 주소(/색상코드-색상코드…)가 되어 그대로 공유된다. 팔레트 탐색 페이지는 검색바 + 카드 그리드에 무한 스크롤을 쓴다.
네이버 파파고
소개 문구 없이 첫 화면 전체가 번역기다. 맨 위에 입력 방식 탭(텍스트·이미지·문서·음성·웹사이트)을 두고, 그 아래 언어 선택과 입력칸·결과칸이 나란히 놓인다. 탭을 바꾸면 같은 틀에서 입력칸만 파일 드롭존으로 바뀌고, 결과칸에는 복사·공유·저장·즐겨찾기 버튼이 붙는다.
iLovePDF
도구형이지만 홈에는 도구가 아니라 30여 개 도구 카드 그리드를 두고, 위에 분류 칩(정리·최적화·변환·편집·보안 등)으로 걸러 보게 한다. 카드를 누르면 제목·한 줄 설명·파일 선택 버튼만 있는 한 화면짜리 도구 페이지로 들어가며, 이 페이지에는 스크롤할 내용이 거의 없다. 설명·후기·FAQ 같은 설득 요소는 요금제 페이지에 몰아 둔다.
TinyPNG
첫 화면 맨 위에 제목보다 먼저 이미지 드롭존을 두고, 서비스 소개 제목(h1)은 그 아래로 내려 보낸다. 드롭존 밑으로 제품 목록 → 고객사·후기 → 사이트 분석 입력 폼 → FAQ 순으로 긴 랜딩이 이어져, 도구와 판매 페이지를 한 장에 겹쳐 놓은 구조다. 요금제와 개발자 API 는 별도 페이지로 분리하고 각 페이지 끝에 FAQ 를 반복한다.
토스 특가
지금 유효한 특가만 카드 그리드로 보여주는 실시간 피드. 상세 페이지가 없고 카드를 누르면 외부(쉐어링크)로 바로 나간다. 클릭당 크레딧 적립(링크당 1회)으로 로그인 유인을 만든 것이 구조의 핵심.
아침경제
홈이 "오늘의 브리핑" 한 장 — 시장 지표 보드와 최신 브리핑 요약이 먼저, 지난 브리핑은 블로그 아카이브로 쌓인다. 텔레그램 채널 구독 CTA를 상단에 둬서 재방문 대신 푸시로 관계를 만든다.
한글뷰어
파일 드롭존이 첫 화면의 전부인 순수 도구형. 처리 결과(문서 뷰)가 같은 화면에서 열리고, 보관함·개발자 API 페이지를 곁가지로 단다. "파일은 서버로 안 간다"는 신뢰 문구를 드롭존 옆에 붙이는 게 전환의 핵심.
마음처방
홈이 곧 도구 — 오늘의 처방 카드가 먼저 보이고, 상황 태그를 고르면 맞춤 처방을 돌려준다. 로그인 없이 쓰게 두고, 공유로 재방문을 만든다. 상세 페이지 대신 결과 화면이 콘텐츠 단위다.
웹기술 도감
웹 기능 1,600여 개를 Baseline 지원 상태와 함께 검색·카테고리·페이지네이션으로 탐색하는 도감. 홈 상단에 큐레이션 데모("이렇게까지 된다")를 배치해 카탈로그 진입 전에 흥미를 만든다.
AI 용어 사전
AI 용어 91개를 대주제 분류·검색으로 탐색하는 사전. 본문 안의 용어가 위키식으로 자동 링크되고, 용어 사이 관계를 그래프 페이지로 시각화한 것이 차별점. 백링크로 항목 간 순환 탐색을 만든다.
프롬프트 · 개발 패턴 허브
프롬프트·개발 패턴을 카테고리별 목록으로 탐색하고 상세에서 복사해 가는 카탈로그. 커뮤니티 제출 폼과 관리자 검수로 콘텐츠가 늘어나는 구조가 특징.
Color 심리테스트
심리테스트 28종을 유형 필터와 인기·트렌디 정렬로 고르는 카탈로그. 실행 페이지는 문항 진행 → 결과 화면 구조이고, 결과가 색상 카드라 공유가 자연스럽다. 결과 유형 페이지를 개별 URL로 분리해 롱테일 검색을 받는다.