도구형 웹사이트는 여기서 방문자가 값을 넣거나 조작해 결과를 얻는 [[웹사이트]]를 가리킨다. 계산기·이미지 편집기·문장 생성기처럼 쓰임은 다양하며, 넓은 의미의 웹 애플리케이션과 겹친다.

- 무엇을 넣고 무엇을 얻는지부터 보여준다. 예시 입력, 실행 버튼, 결과, 다시 시작하거나 저장하는 방법을 한 흐름으로 묶는다.
- 방문자가 도구를 배우는 시간보다 필요한 일을 하는 데 시간을 쓰도록 살핀다. 실패했을 때 무엇을 고쳐야 할지 알려주는 문장도 기능의 일부다.
- 처음에는 [[HTML]]과 [[자바스크립트]]로 한 가지 일만 해보자. 예를 들어 입력한 문장의 줄 수를 세는 도구를 제안할 수 있다. 실험이 작으면 작동 여부도 확인하기 쉽다.
- 계산과 파일 처리가 방문자의 기기에서 이뤄지는지 서버로 전송되는지 구분해 안내한다. [[도구의 결과와 사용자의 판단]]을 함께 생각하며 [[결과를 가져갈 수 있는 도구]]로 만들자.
- [포토피(Photopea)](https://www.photopea.com/)는 웹 브라우저에서 이미지를 편집하는 도구다. [[포토피]] 문서와 함께 입력한 파일에서 편집 결과를 얻는 흐름을 살펴볼 수 있다.
- [[Squoosh]]는 여러 형식으로 이미지 용량을 줄이는 웹 애플리케이션이며, 프로젝트 안내는 압축 처리가 기기 안에서 이뤄진다고 설명한다. 한 가지 작업에 집중하는 사례로 읽을 수 있다. ([프로젝트 설명](https://github.com/GoogleChromeLabs/squoosh))

#웹사이트유형 #도구 #만들기