고객 감동시키기: 놀라운 제품 문서화 사례 10가지

Avatar of Author
Ciaran Sweet
on October 25, 2021 · · filed under Product Documentation Best Practices Technical Writing API Documentation Product Documentation Tutorials
Docsie 팀이 가장 좋아하는 문서 예제와 지식 포털에서 이러한 예제를 복제하는 방법을 참조하세요.

문서화는 제품 개발 프로세스의 필수적인 부분입니다. 제품이 개념 증명에서 현실로 옮겨가면서 고객에게 제품 사용 방법을 교육하기 위해서는 설명 문서가 필수적입니다.

고객이 제품을 선택할 때 가장 먼저 알아야 할 사항은 무엇인가요? 용도는 무엇이고, 어떤 기능을 하며, 어떻게 사용해야 할까요? Docsie를 예로 들어보겠습니다!

Docsie는 제품 문서화 플랫폼입니다. 사용자는 온라인 지식 포털에서 문서를 작성, 편집, 주석 달기 및 게시할 수 있습니다. 로그인하여 새 Docsie 북을 만들고 첫 번째 콘텐츠를 입력하는 것만큼이나 간단합니다!

물론 저희는 단순하게 만들었습니다. 하지만 제품 문서의 경우 복잡한 특징과 기능을 설명하려면 개념을 이해하기 위한 보다 포괄적인 설명이 필요합니다.

이 글에서는 Docsie 팀이 가장 좋아하는 10가지 멋진 제품 문서 작성 사례를 살펴봅니다. 더 좋나요? 멋진 예시에서 영감을 얻어 자신만의 멋진 제품 문서를 만드는 방법도 알려드립니다.

시작해 보겠습니다! 🤿

놀라운 제품 문서 예시 10가지

아래에서 Docsie 팀이 선정한 10가지 놀라운 제품 문서 예시를 확인하실 수 있습니다. 이 예시들을 통해 독시에서 기능 및 기능을 복제하고 이와 유사한 멋진 문서를 직접 작성하는 방법을 살펴보세요!

1 - Docker

Docker는 컨테이너 가상화 플랫폼으로, 개별적으로 격리된 소규모 모듈식 IT 환경 내에서 소프트웨어를 호스팅할 수 있게 해줍니다. 이 개념은 컨테이너 간에 운영 체제 리소스를 분할하고 공유하여 단일 호스트 운영 체제에서 여러 개의 서로 다른 서비스를 호스팅할 수 있게 해줍니다.

Docker 문서

도커 문서 포털 홈페이지

도커는 명확한 형식의 제품 문서 포털을 제공하며, 도커 컨테이너를 다운로드, 설치 및 실행하는 데 필요한 모든 필수 정보를 제공합니다. 또한 다국어 제품 설명서, API 참조 설명서, 자주 묻는 질문(FAQ) 섹션을 하단에 공유합니다. 시각적 학습자를 위해 오른쪽 하단에는 동영상 섹션도 있습니다.

시작하기 섹션을 만들려면 Docsie를 예로 들어 보겠습니다. Docsie에서 시작하려면 계정을 만들고, 이메일 주소를 확인하고, Docsie 워크스페이스 대시보드를 로드하고, 새 선반을 만들고, 새 책을 만들면 기본 작업이 완료됩니다! 각 섹션에 대한 헤더 제목의 프레임워크를 만들고, 지침을 작성하고, 그림과 하이퍼링크를 추가하면 아래와 비슷한 구조가 완성됩니다!

가장 좋은 점은? Docsie가 자동으로 이 작업을 수행합니다!

!"도커 문서의 헤더 구조 예시

Docsie에서 이 작업을 수행하는 방법을 보려면 Docsie 빠른 시작 가이드를 읽어보세요!

2 - 스트라이프

Stripe는 Stripe 명령줄 인터페이스(CLI)를 사용하여 사용자 지정 통합 및 결제 매개변수를 가능하게 하는 기술적 기능을 갖춘 국제 결제 처리 플랫폼입니다. 이 회사의 사명은 전자상거래를 간소화하는 가상 경제 인프라를 구축하여 인터넷의 GDP를 늘리는 것입니다.

Stripe CLI에 대해 자세히 알아보기

코드 하이라이트 예제가 있는 Stripe CLI 문서 페이지](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/zpxindusvnjuriyzpock "코드 하이라이트 예제가 있는 Stripe CLI 문서 페이지")

이 Stripe 페이지는 기술 제품 문서로 알려져 있습니다. 이 페이지에서는 CLI를 사용하여 터미널 명령만 사용하여 Docker 컨테이너(다시 안녕하세요!)를 만들고 Stripe와 통신하는 방법을 살펴봅니다. 이 페이지에는 목차, 복사-붙여넣기 기능이 있는 코드 블록 및 텍스트 내 하이퍼링크가 표시됩니다.

Docsie에는 코드 블록이 있으므로 코드 블록을 사용하는 방법을 살펴봅시다.

Docsie에서 코드 블록 예제 확인

예제를 따라할 수 있도록 준비된 이 코드를 복사합니다 - console.log('Hello World');

닥시 에디터에서 닥시 북을 엽니다. 아래 GIF는 툴바에서 코드 블록 옵션을 찾는 방법을 보여 주며, "Hello World!"를 출력하는 JavaScript 예제를 포함하고 있습니다.

닥시북에 코드 블록을 추가하는 방법을 보여주는 애니메이션 GIF

닥시 포털에서는 기술 독자의 명확성을 높이기 위해 코드 강조 표시가 적용됩니다. 편리한 클립보드 아이콘으로 코드를 복사할 수도 있습니다!

코드 블록용 라이브 닥시 포털 렌더링 예시

닥시에 코드 하이라이팅 플러그인 적용 방법 보기!

3 - Apple

유비쿼터스 애플! 아니, 먹을 수 있는 종류는 아닙니다!

Apple은 인기 있는 iPhone 스마트폰 라인에 대한 훌륭한 제품 문서를 제공합니다. Apple 제품 문서 예시에는 버전 선택기, 목차, 텍스트 및 헤더, 마지막으로 인라인 이미지가 있습니다.

애플 아이폰 문서 페이지](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/xvuspkjrqcaxcncgqzbq "애플 아이폰 문서 페이지")

Docsie의 버전 관리에 대해 살펴봅시다!

닥시에서 버전 관리에 대한 가이드를 읽어보세요!

독자는 Docsie 지식창고에서 문서를 읽을 때 버전 선택 플러그인을 사용하여 버전을 선택할 수 있습니다.

닥시 포털의 버전 선택기

이를 통해 독자는 아직 업데이트하지 않은 느린 독자들을 위해 과거 제품 문서를 볼 수 있습니다!

닥시에서 새 버전을 만들려면 닥시 에디터의 버전 관리 탭을 사용하세요.

닥시 에디터의 버전 선택 메뉴

여기에서 버전 추가 + 를 클릭합니다.

닥시에 에디터에서 버전 추가 버튼

그런 다음 버전 번호와 버전 이름을 선택한 후 버전 추가 버튼을 클릭합니다. 아주 간단합니다! 기능 변경 사항이 있는 새 버전 문서를 업데이트하여 고객이 최신(또는 가장 늦은) 정보를 찾을 수 있도록 하세요!

문서 편집기에서 버전 추가 컨텍스트 옵션 메뉴

4 - 파싱

Parse는 애플리케이션 백엔드를 위한 오픈 소스 프레임워크를 제공하는 뛰어난 풀 스택 소프트웨어 플랫폼입니다. 간단히 말해, 개발자가 모든 개발 프로젝트와 통합할 때 신뢰할 수 있는 사전 제작된 코드 리소스를 제공합니다.

Parse 문서 포털에는 호환성 테이블 형식의 훌륭한 문서 예제가 있습니다. 이를 통해 Node.js 및 MongoDB와 같은 다양한 아키텍처와 Parse 플랫폼의 호환성을 모니터링할 수 있습니다.

Parse 웹사이트의 버전 호환성 표 예시

Docsie에서 만들어 봅시다!

Docsie의 테이블 블록을 사용하여 Parse 예제와 유사한 4열 테이블을 만들 수 있습니다.

4열 옵션이 강조 표시된 Docsie 테이블 블록 아이콘

표 블록 아이콘을 선택한 다음 4열 옵션을 선택합니다.

입력할 때 Enter 키를 사용하여 열을 따라 이동합니다. 키보드에서 Ctrl + B를 사용하여 텍스트를 굵게 만듭니다. 마지막으로 기호 옵션을 사용하여 이모티콘을 추가합니다.

문서 편집기에서 4열 표 복제

닥시 에디터의 기호 선택 메뉴

닥시에 에디터의 심볼 컨텍스트 메뉴용 이모티콘 및 기호 선택표

닥시에 편집기 도구 모음에 대해 알아보기

API 문서와 기술 소프트웨어 문서를 쉽게 작성할 수 있는 방법입니다. Node.js 웹사이트로 연결되는 하이퍼링크나 관련 사용자 가이드에 대한 내부 링크를 추가하여 더 나아갈 수 있습니다. Docsie에서 다음 API 호환성 표를 제공하세요!

5 - Flutter

Flutter는 모바일, 웹, 데스크톱 및 임베디드 기기 전반에서 일관된 사용자 인터페이스 디자인을 구현하기 위해 Google에서 만든 UI 툴킷입니다. 온라인 코드 편집기로 빠른 UI 디자인 및 개발을 촉진하며, 계층화된 컨테이너 기반 아키텍처로 완벽한 커스터마이징이 가능합니다.

Flutter는 사용자가 플랫폼에 대해 보고 배울 수 있는 다양한 동영상을 호스팅합니다. Google에서 만든 플랫폼이므로 이 예제에서는 YouTube가 논리적으로 선택되었습니다!

Flutter YouTube 동영상 예제 페이지

닥시에서 동영상 임베드 블록을 사용하여 이 디자인을 에뮬레이션할 수 있습니다!

닥시 에디터 툴바를 사용하여 닥시북에 동영상 임베드 블록을 추가하는 방법

닥시북 내에서 클릭하고 동영상 임베드 아이콘을 선택한 다음 텍스트 필드에 YouTube URL을 복사하기만 하면 됩니다. 데일리모션, 비메오 및 기타 다양한 동영상 호스팅 웹사이트에서도 동일한 작업을 수행할 수 있습니다.

이 과정을 보여주는 GIF가 있으니 직접 동영상을 Docsie에 추가해 보세요!

Docsie 편집기 도구 모음 사용 방법 알아보기

6 - 아이오닉 프레임워크

Ionic 프레임워크는 HTML, CSS, JavaScript 및 기타 웹 기술을 사용하여 고성능 데스크톱 및 모바일 애플리케이션을 구축하기 위한 오픈 소스 UI 툴킷입니다.

다양한 UI 구성 요소, 기본 디바이스 기능 및 테마 지원을 통해 Angular, React 및 Vue와 같은 인기 프레임워크와 통합됩니다.

Ionic은 사이트에 훌륭한 휴대폰 예제를 내장하고 있습니다. iFrame 임베드를 사용하여 닥시북에 비슷한 예제를 추가해 보겠습니다!

먼저 아래 코드를 복사합니다:

<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>

그런 다음 닥시 에디터에서 코드 임베드 블록을 클릭합니다. 여기에 iFrame 임베드 코드를 붙여넣은 다음 저장을 클릭하여 계속합니다. 아래에는 이 과정을 설명하는 GIF가 있습니다.

닥시 에디터 툴바를 사용하여 닥시북에 iFrame 연동 기능을 임베드하는 방법

닥시 포털의 라이브 아이프레임 예시

닥시에서 아이프레임을 사용한 공식 통합 목록 보기!

7 - 디지털오션

DigitalOcean은 클라이언트가 서버, 가상 머신, 데이터베이스 등을 호스팅할 수 있는 클라우드 컴퓨팅 서비스 플랫폼입니다. 확장 가능한 컨테이너 애플리케이션을 위한 전용 쿠버네티스 서비스와 웹 호스팅, 모바일 앱, 빅 데이터 레이크, VPN 서비스를 위한 관리형 솔루션을 제공합니다.

DigitalOcean은 사용자 피드백을 수집하고 콘텐츠를 반복할 수 있도록 문서에 피드백 기능을 제공합니다. Docsie에서 이를 수행하는 방법을 살펴보세요!

피드백 수집 기능이 있는 DigitalOcean 문서 페이지 예시

Vocally는 Docsie에서 피드백을 수집하는 것과 동일한 기능입니다. 사용자는 별점 평가, 텍스트 피드백, 심지어 동영상 녹화를 남길 수 있습니다.

닥시 워크스페이스 메인 메뉴에서 닥시 보칼리에 액세스하는 방법](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "닥시 워크스페이스 메인 메뉴에서 닥시 보칼리에 액세스하는 방법")

여기에서 제출된 모든 Docsie Vocally 피드백에 액세스할 수 있습니다. 사용자는 1~5개의 별점과 간단한 텍스트 설명을 선택할 수 있습니다. 일부 사용자는 화면 녹화본을 남길 수도 있으므로 정확한 문제를 파악하는 데 도움이 됩니다!

닥시 보칼리 대시보드에서 사용자 피드백 및 동영상 재생의 실시간 예

모든 닥시 고객은 Vocally에 액세스할 수 있으며, 이는 문서의 장단점을 파악하는 데 매우 유용합니다. 처음에 항상 올바르게 작성할 수는 없지만, 작성자가 Docsie Vocally를 사용하면 다음 반복 작업에서 더욱 올바르게 작성할 수 있습니다!

8 - 슬랙

Slack은 비즈니스 세계의 왓츠앱이 된 것은 틀림없습니다. 이 인기 있는 비즈니스 인스턴트 메시징(IM) 플랫폼은 음성 및 영상 통화, 이미지 및 GIF 공유, 댓글 회신 트리 등을 제공하여 비즈니스 커뮤니케이션을 정리하고 간소화합니다.

Slack은 문서 포털 전체에 툴팁을 제공하여 중요한 정보를 강조하고 콜아웃 관련 기능을 제공합니다. 이를 Docsie에서 재현해 봅시다!

Slack 문서 포털의 콜아웃 블록 예시

독시에서 따옴표 블록을 사용하여 위와 같은 툴팁을 만들 수 있습니다.

다양한 문서 편집기 버튼 사용 방법 알아보기

문서 편집기 도구 모음으로 이동하여 인용 블록 아이콘을 선택하기만 하면 됩니다. 여기에서 정보, 경고 또는 질문 블록 유형을 선택할 수 있습니다. 아래 애니메이션 GIF에서 이를 설명합니다.

닥시 편집기 도구 모음을 사용하여 닥시북에 콜아웃 또는 인용 블록을 추가하는 방법

다음은 라이브 닥시 포털에서 정보, 경고 및 질문 인용 블록을 사용하는 몇 가지 변형 방법입니다. 질문 및 경고 블록을 추가로 사용하여 질문과 답변 문장을 만들 수도 있습니다. 다음 닥시북에서 인용 블록을 사용하여 창의력을 발휘해 보세요!

!"닥시 포털의 세 가지 콜아웃 또는 인용 블록 유형 모두에 대한 라이브 예시

9 - Rust

Rust는 속도를 염두에 두고 설계된 프로그래밍 언어입니다. 세그폴트를 방지하고 프로세서 스레드 안전을 보장할 수 있습니다. Rust는 REST-API 프레임워크를 생성하고, PostgreSQL과 같은 데이터베이스 솔루션과 통신하는 데 사용할 수 있습니다.

Rust 표준 라이브러리에는 API 문서 검색을 간소화하는 인라인 코드 스니펫이 포함되어 있습니다. Docsie에서 찾아보세요!

마크업 코드가 포함된 Rust 포털의 문서 예시

인라인 코드 스니펫에는 Vec<T>Option<T>가 포함되어 있습니다. Docsie에서 마크업 버튼을 사용하여 이 작업을 수행할 수 있습니다.

닥시 에디터 툴바의 마크업 토글 아이콘

텍스트를 코드로 마크업하려면 클릭 앤 드래그하여 텍스트를 강조 표시한 다음 마크업 버튼을 클릭하기만 하면 됩니다. 아래에 이 과정을 설명하는 GIF가 있습니다.

닥시 에디터 도구 모음을 사용하여 닥시북의 텍스트에 마크업을 적용하는 방법을 보여주는 애니메이션 GIF

마크업 텍스트에는 하이퍼링크도 포함됩니다. 이 링크는 코드 조각의 기능을 설명하는 용어집으로 리디렉션됩니다.

닥시에서 하이퍼링크를 만드는 방법에 대한 단기 강좌 수강하기

10 - Yoast

Yoast는 비즈니스가 워드프레스 사이트를 최적화하고 SEO 모범 사례에 대한 지식을 향상시킬 수 있도록 설계된 검색엔진최적화(SEO) 플랫폼입니다. Yoast SEO 플러그인은 웹사이트를 최적화하여 Google 검색 엔진 결과 페이지(SERPS)에서 더 나은 성능을 발휘하도록 하여 고객 참여를 유도합니다.

Yoast는 문서 포털에서 목록 헤더를 사용한 단계별 가이드를 제공합니다. 이를 Docsie의 목록 헤더로 복제할 수 있습니다!

예시: Yoast 문서 포털의 단계 헤더](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/okmupunyophvijddimng "예시: Yoast 문서 포털의 단계 헤더")

Docsie에서 이 작업을 수행하려면 먼저 책을 만들고 Docsie 편집기를 엽니다.

그런 다음 텍스트 필드를 클릭하고 닥시 편집기 도구 모음에서 목록 헤더 옵션을 선택합니다. 아래에 이 과정을 설명하는 GIF가 있습니다.

닥시 편집기 도구 모음을 사용하여 닥시 북에 단계 헤더를 추가하는 방법을 보여주는 애니메이션 GIF

목록 헤더는 HTML 사양의 일부입니다. 문서 내에서 직접 링크를 만들 수 있다는 점에서 목록 헤더는 매우 유용합니다. 즉, 사용자가 링크를 클릭하면 스크롤하거나 스와이프할 필요 없이 목록 헤더로 바로 이동합니다.

닥시 에디터 툴바를 사용하여 닥시북에 동영상 임베드 블록을 추가하는 방법](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/lradwltxuqolxfmzxxwr "닥시 에디터 툴바를 사용하여 닥시북에 동영상 임베드 블록을 추가하는 방법")

닥시 에디터 기능에 대해 자세히 알아보기

닥시에의 다양한 기능을 활용해보세요! 🏆

이 10가지 문서 예시는 사용자 가이드가 얼마나 유용한지 보여줍니다. 다음에 사용자 가이드를 작성할 때는 이 문서 작성 팁과 요령을 활용해 보세요! 저희가 선택한 예시도 훌륭하지만 여러분의 예시는 훨씬 더 훌륭할 것입니다! 📐👌

Docsie는 기업이 웹 기반 FAQ, 제품 문서, 사용 안내서, 도움말 문서 및 사용자 설명서를 만드는 데 사용하는 엔드투엔드 문서 관리 플랫폼입니다. 이 플랫폼은 고객 중심의 협업, 광범위한 임베딩, 맞춤형 번역, 강력한 게시 기능을 손쉽게 사용할 수 있습니다.

지금 바로 온보딩 시작하기를 클릭하고 Docsie로 멋진 디지털 문서를 제공하세요!


Subscribe to the newsletter

Stay up to date with our latest news and products