개발자가 Twitter에 코드 스니펫을 스크린샷으로 공유합니다. 튜토리얼 블로그 글은 예제를 코드 블록 대신 이미지로 렌더링합니다. 내부 도구의 문서는 터미널 스크린샷으로만 존재합니다. Stack Overflow 답변에는 포매터가 원본을 망가뜨려서 이미지로 삽입된 코드가 들어 있기도 합니다. 어느 경우든 코드는 눈에 보이고 읽을 수 있지만 이미지일 뿐이며, 이미지에서 코드를 다시 입력해 복사하는 것이야말로 눈에 띄지 않는 버그를 만들어내는 가장 확실한 방법 중 하나입니다.
이미지 속 코드를 다시 입력하면 실패하는 이유
일반 글과 달리 코드는 대략적인 것을 조금도 용납하지 않습니다. 세미콜론 하나가 빠지거나, 소문자 L과 숫자 1이 헷갈리거나, 중괄호와 소괄호를 혼동하거나, 하이픈 대신 엔대시가 들어가는 것만으로도 코드는 조용히 망가집니다. 스크린샷에서 다시 입력할 때는 한 글자씩 눈으로 파싱하는 속도로 작업하게 되는데, 이는 정확히 이런 실수를 부르는 방식입니다.
이 문제는 광범위하게 퍼져 있습니다. 소셜 미디어 플랫폼은 더 보기 좋게 렌더링하기 위해 코드를 이미지로 변환합니다. 오래된 문서는 스크린샷에서 벗어나 텍스트로 옮겨진 적이 없습니다. 코드가 담긴 Slack이나 Teams 메시지는 종종 스크린샷으로 캡처되어 전달됩니다. 사내 위키에는 아무도 옮겨 적지 않은 수년치 터미널 스크린샷이 쌓여 있습니다.
화면에서 바로 코드 추출하기
Optic은 화면에서 바로 코드 문자를 읽어냅니다. 코드 이미지가 담긴 스크린샷이나 페이지를 열고 메뉴 막대에서 Optic을 실행한 다음 코드 위로 선택 영역을 드래그하세요. 추출한 텍스트는 클립보드로 이동해 에디터나 터미널에 바로 붙여넣을 수 있습니다.
터미널 명령어
긴 설치 명령어, Docker run 구문, 여러 플래그가 붙은 curl 요청 — 이런 것들은 흔히 스크린샷으로 공유됩니다. Optic으로 한 번만 드래그하면 오타가 나기 쉬운 특수 문자, 플래그, 경로까지 그대로 보존하며 전체 명령어를 추출합니다.
소셜 미디어의 코드 스니펫
Twitter, LinkedIn, Instagram 게시물은 Carbon이나 Ray.so 같은 도구를 사용해 코드를 이미지로 렌더링하는 경우가 많습니다. Optic은 이런 스타일이 입혀진 스크린샷에서도 일반 터미널 출력과 마찬가지로 손쉽게 코드를 추출합니다.
여러 줄 추출
여러 줄에 걸친 코드 블록을 선택하면 Optic이 줄 구조를 그대로 유지합니다. 에디터에 붙여넣으면 코드 모양이 그대로 유지되어 수동으로 다시 포맷할 필요가 없습니다. 각 캡처는 메뉴 막대 기록에 저장되므로, 튜토리얼에서 여러 스니펫을 추출해 하나씩 붙여넣을 수 있습니다.