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

도구형 구조

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

첫 화면 상단에 두는 것

  • 히어로8건 중 7건
  • 결과 화면8건 중 3건
  • 기능 목록8건 중 2건
  • 파일 드롭존8건 중 2건
  • 필터·정렬8건 중 2건
  • 입력 폼8건 중 2건

자주 쓰는 기능

  • 로그인·계정8건 중 7건
  • 파일 업로드8건 중 7건
  • 내보내기·저장8건 중 5건
  • 다국어8건 중 4건
  • 개발자 API8건 중 3건
  • 결제8건 중 3건

레퍼런스 8건

🧭
도구형페이지 3 · 기능 3

사람인 취업TOOL

채용 포털 안에 도구 10종을 한 묶음으로 넣은 구조다. 모든 도구 페이지가 '제목 → 도구 전환 탭 → 왼쪽 입력·오른쪽 결과' 틀을 똑같이 쓰고, 결과 칸은 입력 전에도 0 값으로 미리 보인다. 도구 바로 아래에는 채용공고 목록을 붙여 본 서비스로 돌려보낸다.

🧭
도구형페이지 3 · 기능 8

Excalidraw

홈이 곧 빈 캔버스다. 가운데에 로고·저장 안내 한 문단과 바로가기 네 줄(열기·도움말·실시간 협업·가입)만 떠 있고, 그리기 시작하면 사라진다. 내보내기·테마·언어·검색 같은 기능은 전부 왼쪽 위 메뉴 하나에 접어 두었고, 도형 라이브러리 목록과 유료판 소개는 별도 서브도메인으로 떼어 냈다.

🧭
도구형페이지 4 · 기능 5

Coolors

홈은 도구가 아니라 랜딩이다. 큰 제목과 버튼 두 개(생성기 시작 / 팔레트 탐색)로 갈림길을 만들고, 아래에 도구 목록을 카드로 나열한다. 생성기 페이지는 머리말 없이 화면 전체가 색 기둥 다섯 개와 얇은 도구 줄뿐이고, 만든 팔레트가 곧 주소(/색상코드-색상코드…)가 되어 그대로 공유된다. 팔레트 탐색 페이지는 검색바 + 카드 그리드에 무한 스크롤을 쓴다.

🧭
도구형페이지 3 · 기능 6

네이버 파파고

소개 문구 없이 첫 화면 전체가 번역기다. 맨 위에 입력 방식 탭(텍스트·이미지·문서·음성·웹사이트)을 두고, 그 아래 언어 선택과 입력칸·결과칸이 나란히 놓인다. 탭을 바꾸면 같은 틀에서 입력칸만 파일 드롭존으로 바뀌고, 결과칸에는 복사·공유·저장·즐겨찾기 버튼이 붙는다.

🧭
도구형페이지 3 · 기능 6

iLovePDF

도구형이지만 홈에는 도구가 아니라 30여 개 도구 카드 그리드를 두고, 위에 분류 칩(정리·최적화·변환·편집·보안 등)으로 걸러 보게 한다. 카드를 누르면 제목·한 줄 설명·파일 선택 버튼만 있는 한 화면짜리 도구 페이지로 들어가며, 이 페이지에는 스크롤할 내용이 거의 없다. 설명·후기·FAQ 같은 설득 요소는 요금제 페이지에 몰아 둔다.

🧭
도구형페이지 3 · 기능 5

TinyPNG

첫 화면 맨 위에 제목보다 먼저 이미지 드롭존을 두고, 서비스 소개 제목(h1)은 그 아래로 내려 보낸다. 드롭존 밑으로 제품 목록 → 고객사·후기 → 사이트 분석 입력 폼 → FAQ 순으로 긴 랜딩이 이어져, 도구와 판매 페이지를 한 장에 겹쳐 놓은 구조다. 요금제와 개발자 API 는 별도 페이지로 분리하고 각 페이지 끝에 FAQ 를 반복한다.

🧭
도구형페이지 3 · 기능 5

한글뷰어

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

🧭
도구형페이지 1 · 기능 3

마음처방

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