iPhone용 코드 스크린샷 앱을 검색해서 오셨다면 아마 정리 글을 기대하셨을 겁니다. 앱 열 개, 비교표, 그리고 1위.

쓸 것이 없습니다. 찾아보면 나오는 건 Safari에서 여는 웹 도구들과, 구문에 색은 입히지만 공유할 이미지는 만들지 않는 코드 편집기들입니다. 데스크톱에서는 넘쳐나는 이 분야가, iPhone 네이티브 소프트웨어로는 거의 존재하지 않습니다.

수많은 개발자가 하는 일치고는 이상한 공백이고, 먼저 열린 브라우저 탭으로 대충 넘어가기 전에 이유를 알아 둘 만합니다.

읽기 전에 밝혀 둡니다. 저희는 몇 안 되는 네이티브 선택지 중 하나인 Codeshot을 만들고, 무료가 아닙니다. 마지막 절에는 사지 말아야 할 사람도 적어 두었습니다. 무엇을 두고 하는 이야기인지 알 수 있도록, iPhone에서 돌아가는 모습입니다.

iPhone에서 실행 중인 Codeshot: 그러데이션 배경 위에 렌더링된 코드와 그 아래 테마·배경 조절 항목

실제로 찾게 되는 것

웹 도구. Carbon.now.sh, ray.so, 그리고 비슷한 사이트들의 긴 꼬리. 이 분야의 진짜 주인은 이들입니다. 페이지가 열린다는 의미에서는 휴대폰에서도 작동합니다.

코드 편집기. TextasticKoder는 코드에 색을 입히는 정말 좋은 네이티브 iOS 앱입니다. 둘 다 게시물용으로 꾸민 이미지를 만들려 하지는 않습니다. 편집기가 하는 일이 원래 그게 아니니까요.

그 사이에는 거의 아무것도 없습니다. 그 공백이 이 글의 전부입니다.

App Store를 공정하게 보자면, 그곳은 거대하고 저희도 검색도 못 건져 낸 무언가가 있을 수 있습니다. 하지만 찾아 헤매야 한다는 사실 자체가 이미 결론입니다. 데스크톱에서는 이 분야가 우스울 정도로 붐빕니다.

왜 공백이 생겼나

아무도 원하지 않아서가 아닙니다. 그걸 만드는 데 무엇이 드는가의 문제입니다.

코드 스크린샷 도구는 서로 맞물려야 하는 세 조각으로 되어 있습니다. 구문 강조기. 쓸모 있을 만큼 언어를 커버한다는 건 문법 묶음을 배포하고 유지한다는 뜻이지, 정규식 하나를 쓴다는 뜻이 아닙니다. 렌더러. 알맞은 글꼴과 자간, 창 장식으로 텍스트를 배치하고, 매번 똑같은 픽셀을 내놓아야 합니다. 내보내기 경로. 깔끔하게 배율을 맞추고 이미지가 갈 곳으로 넘겨야 합니다.

웹에서는 이 셋이 거의 공짜입니다. 브라우저에는 이미 레이아웃 엔진이 있고, highlight.js는 스크립트 태그 한 줄이며, 내보내기는 canvas입니다. Carbon이 존재하는 이유도, 뒤따른 열몇 개의 도구가 전부 웹 페이지인 이유도 그것입니다. 다음 하나를 만드는 한계비용이 아주 낮습니다.

네이티브는 정반대입니다. 강조기도, 텍스트 배치도, 렌더링도 직접 들고 와야 합니다. 게다가 웹 도구와 달리 브랜치에 푸시해서 수정을 내보낼 수 없습니다.

그래서 유인은 늘 브라우저 쪽을 가리켰습니다. 그럼에도 네이티브로 간 앱들은 네이티브가 값을 하는 곳으로 갔습니다. 어차피 제대로 된 텍스트 처리가 필요한 편집기 말입니다.

웹 도구가 휴대폰을 만나면 무엇이 무너지나

극적인 일은 없습니다. 마찰이, 세 군데에서, 매번입니다.

코드를 집어넣기. 편집기는 웹 텍스트 영역입니다. 선택 핸들도 커서도 자동 수정도 iOS의 다른 웹 입력란과 똑같이 동작합니다. 코드 편집기처럼 굴지 않는다는 뜻입니다.

무언가를 조절하기. Carbon의 전제는 무엇이든 조절할 수 있다는 것입니다. 테마, 글꼴, 패딩, 배경, 배율. 데스크톱에서는 눈으로 훑는 메뉴 한 줄입니다. 휴대폰에서는 찾아 헤매야 하는 작은 표적들이고, 하나 열 때마다 조절 중인 미리보기를 덮습니다. ray.so가 이걸 더 잘 견디는 건 정확히 제공하는 게 적기 때문입니다.

이미지를 꺼내기. 내보내기는 브라우저 다운로드입니다. iOS에서는 파일이 어딘가 떨어지고 그걸 찾으러 간다는 뜻이지, 올리려던 앱으로 바로 넘어간다는 뜻이 아닙니다.

한 달에 한 번이라면 이 중 무엇도 문제가 아닙니다. 매주라면, 매번 같은 세 가지와의 싸움입니다.

네이티브가 실제로 주는 것

세 가지이고, 전부 중간이 아니라 양 끝에 관한 것입니다.

클립보드가 한 번의 터치. 유니버설 클립보드 덕분에 Mac에서 복사한 코드는 이미 휴대폰에 있습니다. 네이티브 앱은 그걸 곧바로 가져올 수 있습니다.

내보내기가 공유 시트로 갑니다. 다운로드가 아니라 메시지, 슬랙, 게시물 초안, 파일, 사진 보관함으로 직행합니다.

설정이 남습니다. 테마와 배경, 비율이 지난번에 고른 그대로입니다. 열 번째 이미지가 몇 분이 아니라 몇 초에 끝나는 이유의 대부분이 이것입니다.

누구에게는 중요하고 누구에게는 전혀 상관없는 네 번째도 있습니다. 코드가 웹 페이지로 들어가지 않는다는 점입니다. 고객사 작업이나 미공개 기능을 붙여넣는 상황이라면, 본인에게는 상관없어도 윗선의 누군가에게는 의미 있는 차이일 수 있습니다.

그래서 무엇을 써야 하나

가끔 — Safari의 ray.so. 무료이고, 작은 화면이 문제가 되지 않을 만큼 선택지가 적으며, 결과도 괜찮습니다. 한 달에 두 번 쓰는 무료 도구는 바꿀 필요가 없습니다.

주로 책상에서 — Mac에서 Carbon.now.sh를 쓰고, 휴대폰에서 시도하는 걸 그만두기. 무료이고, 오픈 소스이고, 원래 쓰이도록 만들어진 자리에서는 훌륭합니다.

휴대폰에서, 자주 — 네이티브는 이 경우를 위해 있습니다. Codeshot은 Mac과 iPhone의 네이티브 앱입니다. 한 번 눌러 클립보드에서 붙여넣기, 30가지 구문 테마, 코드 자체로 판별하는 60개 언어, 1:1부터 9:16까지의 비율 프리셋, 그리고 공유 시트로의 내보내기.

절대 안 됨 — 기본 스크린샷. 코드의 너비가 아니라 휴대폰의 너비를 기록하고, 누르기도 전에 줄이 이미 접혀 있습니다.

저희 것을 사지 말아야 할 사람

5.99달러이고 애플 기기 전용입니다. 이 글에 나온 웹 도구는 전부 무료이고 어디서든 돌아갑니다.

한 달에 코드 이미지 한 장을 만든다면 정답은 ray.so이고, 저희도 그쪽을 쓰시길 바랍니다. iPhone도 Mac도 아니라면 애초에 할 선택이 아닙니다. 이미지를 늘 책상에서 만든다면, 데스크톱의 Carbon은 무료이고 아주 좋습니다.

네이티브 앱을 살 이유는 좁고 구체적입니다. 자주 하고, 휴대폰에서 하고, 그 마찰이 앱 값보다 더 비싸지기 시작했을 때입니다.

그게 여러분이라면 iPhone에서 코드를 이미지로 만드는 법이 전 과정을 안내하고, iPhone에서 쓰는 Carbon.now.sh가 브라우저에서 무엇이 무너지는지 더 깊이 다룹니다.