블로그 글은 코드 예제를 스타일이 입혀진 이미지로 렌더링합니다. 동료는 풀 리퀘스트 댓글에 IDE 스크린샷을 붙여넣습니다. 오래된 도구의 문서는 위키에 터미널 스크린샷으로만 존재합니다. Stack Overflow 답변에는 포매터가 원본을 망가뜨려서 이미지로 삽입된 코드가 들어 있기도 합니다. 어느 경우든 코드는 눈에 보이고 읽을 수 있지만 이미지일 뿐이며, 이미지에서 코드를 다시 입력해 복사하는 것이야말로 세미콜론인 줄 알았던 콜론 하나 때문에 30분을 디버깅에 쏟게 되는 지름길입니다.
코드는 한 글자도 틀림없는 추출을 요구합니다
일반 글과 달리 코드는 대략적인 것을 조금도 용납하지 않습니다. 언더스코어 대신 하이픈이 들어가면 import가 깨집니다. 괄호 하나만 잘못 놓여도 함수가 무효가 됩니다. 대문자가 필요한 곳에 소문자가 들어가면 변수 참조 자체가 완전히 바뀝니다. 이미지에서 코드를 다시 입력할 때는 모든 문자가 잠재적인 실패 지점이 되며, 그렇게 생긴 버그는 언뜻 보기에는 맞아 보이기 때문에 눈에 띄지 않습니다.
이 문제는 긴 명령어, 여러 줄로 된 스니펫, 낯선 구문에서 더욱 커집니다. 플래그가 열 개나 붙은 Docker run 명령어, 정규식 패턴, 파이프와 리다이렉션이 있는 셸 파이프라인 — 이런 것들이야말로 이미지로 공유되면서 정확하게 다시 입력하기가 거의 불가능한 콘텐츠입니다.
화면의 어떤 이미지에서든 코드 추출하기
Optic은 화면에서 직접 코드 문자를 읽어냅니다. 코드가 담긴 이미지, 튜토리얼 페이지, 스크린샷을 열고 메뉴 막대에서 Optic을 실행한 다음 스니펫 위로 선택 영역을 드래그하세요. 들여쓰기, 특수 문자, 줄 구조까지 그대로 보존한 인식된 텍스트가 곧바로 클립보드로 이동합니다.
터미널 명령어
설치 스크립트, 빌드 명령어, 배포 파이프라인이 터미널 스크린샷으로 표시되는 것은 문서와 튜토리얼에서 흔합니다. 명령어 블록을 선택해서 플래그, 경로, 인자가 정확하다는 확신을 가지고 터미널에 붙여넣으세요.
IDE 스크린샷
동료가 Slack, GitHub 댓글, 이메일로 코드 스크린샷을 공유했다면, 코드를 추출해서 여러분의 에디터에 붙여넣으세요. 이미지를 들여다보며 눈을 찌푸리는 대신 제대로 테스트하고, 수정하고, 검토할 수 있습니다.
여러 스니펫 추출
튜토리얼은 종종 한 페이지에 여러 코드 블록을 보여줍니다. 각각을 순서대로 추출하세요. Optic의 캡처 기록은 모든 추출 내용을 저장하므로, 튜토리얼 전체를 훑으며 기록 드롭다운에서 각 스니펫을 하나씩 프로젝트에 붙여넣을 수 있습니다.