Visual Communication 사례 조사

직업병인지 아무래도 Technical Writer로 일하면서 다른 회사 Docs 사이트들은 어떻게 돼있는지 유심히 보는 습관이 생겼다.

회사에서 Technical Writing 101 발표 준비를 하다-

Chapter 8에서 Visual Communication 얘기가 나오길래

(근데 책은 내용이 아무래도 올드하니까)

발표 준비도 할겸 다른 Docs 사이트들 visual communication trend를 찾아봤다.

 

전체 스크린샷 vs. 부분 스크린샷 pros and cons

전체 스크린샷

• 장점: 메뉴를 포함한 전체 화면을 볼 수 있음
• 단점:
  • (부분 스크린샷과 반대의 이유로) 너무 많은 정보가 있으면 화면에서 어디에 해당 메뉴가 있는지 파악하기 어려움
  • 화면 UI가 (자주) 바뀌면 문서도 지속적으로 업데이트 해줘야 함 but 현실적으로 쉽지 않음

부분 스크린샷

• 장점: 문서에서 이미지가 눈에 잘 들어옴
• 단점: 그래서 이 이미지가 전체 화면에서 어디에 있는지 충분히 설명하지 않으면 잘 못 찾을수도 있음

GitHub Docs

Configuring notifications - GitHub Enterprise Server 3.3 Docs

• 스크린샷이 화면 전체 스크린샷이 아닌 필요한 부분만 나와있음 + 그림자(?) 효과 눈에 잘 들어옴

• 특정 버튼을 누르고 저장하는 각 단계를 일일히 스크린샷으로 올리지 않고 동작을 GIF로 만들어서 보여줌

• step by step 단계가 1.2.3 숫자 아이콘으로 넣어줘서 눈에 잘 들어옴

스크린샷

• 장점: 텍스트만으로 설명이 부족할 때 or 이해하기 어려울 때 도움이 됨
• 단점: 실제 콘솔과 문서 이미지가 일치하지 않으면 안 넣는 것만 못함
  • 사용자가 헷갈림
  • 문서 관리 안한다는 안 좋은 인상 줄 수 있음

결론

• (TW101에 따르면) 완전 전체 스크린샷도, 너무 부분 스크린샷도 아닌, 적절한 context를 포함하는게 좋음

• 텍스트만으로 설명이 충분하다면 굳이 스크린샷을 안 넣어도 되지 않을까?

e.g. AWS Tutorial은 이미지 거의 없고 step-by-step instruction 위주임

Tutorials - Amazon Simple Storage Service

Documenting APIs

• 화면 스크린샷도 포함하되 짧막한 유튜브 클립 (약 20~40초)도 포함
• 화살표로 해당 메뉴가 어디 있는지 표시해줌

Getting started tutorial: Using Stoplight Studio to create an OpenAPI specification document

유튜브 pros and cons

• 장점: tutorial로 따라하는데 사용자한테는 유용한 자료가 될 수 있음
• 단점: 시간도 오래 걸리고 신경써야 할 것들이 많음. 공수가 많이 든다.
  • 제대로 관리하려면 지속적으로 콘텐츠 업데이트 필요함
  • 동영상 편집은 전문가의 도움을 받는게 좋음
• 대안: 각잡고 몇 십분 짜리 찍는 것보단 20~30초 정도 짧게 클립 정도로 만드는 게 낫지 않을까?

토스페이먼츠

• 직관적임. Step by step으로 간결하고 쉽게 적어놔서 눈에 잘 들어옴
• 코드와 UI를 같이 보여줌

체험하기 | 토스페이먼츠 결제 연동 문서

클로바 더빙 AI

• 유튜브 촬영시 별도의 목소리 촬영하지 않고 AI 목소리 사용할 수 있음
  • e.g. 사용자 튜토리얼 (화면만 따로 찍고 목소리 설명은 자막 스크립트 + AI 목소리 이용)
• 인위적인 느낌(?)이 나긴 하지만 거부감 느낄 정도는 아님

클로바더빙