하지만 사용할 수록, 부족한 부분들이 느껴지더라구요. 플랫폼마다 어딘가 하나씩 아쉬운 부분이 보였습니다. '이런 기능이 있으면 좋겠다', '이 부분은 좀 불편하네', '이건 선택할 수 있게 만들면 좋을 것 같은데..'라는 것들이요. 그래서 아쉬운 부분들을 Sprinters에 추가해봤습니다.

먼저 Sprinters 코드 블록을 보여드릴게요. 코드 블록을 추가하기 위해서는 아래 이미지처럼 본문의 플러스 버튼을 클릭 후, 코드 블럭 아이콘을 선택하시면 됩니다.

그럼 코드 블럭 에디터가 모달 형태로 뜨게 돼요. 이 상태에서 코드를 작성하시면 됩니다.

내용이 없을 경우 적용 버튼은 비활성화 상태이며, 내용이 있어야 적용 버튼이 활성화가 됩니다. 줄마다 줄 번호가 표시되고, 입력 중이거나 선택된 자리에는 줄 번호에 약한 힌트가 표시되도록 만들었어요.

또한 코드를 직접 입력하기 보다는 코드 에디터에서 복사 붙여넣기 하는 경우가 많았기 때문에, 들여쓰기가 깨지는 경우를 대비해 2칸/4칸 들여쓰기, 내어쓰기 둘 다 지원을 하게 만들었어요. redo, undo, 한 줄제거까지도 가능합니다.

diff 기능도 넣었습니다. 뭔가 자주 사용하지는 않지만, 없으면 서운한 느낌이더라구요.

이렇게 코드를 다 작성하고 나면 오른쪽 하단의 적용 버튼을 통해, 하이라이팅된 최종 버전을 확인하실 수 있어요.

발행을 하면, 발행된 페이지에서도 동일한 UI가 적용됩니다.

코드 블럭 편집 레이어에서는 초안의 자동저장 기능을 사용하기에는 약간 결이 다르다고 생각을 했어요. 그래서 약간의 안전장치로 세션 스토리지에 임시저장본을 두도록 해놨습니다. 적용, 취소, X 버튼, ESC를 통해 모달이 닫혔을 때는 임시저장을 하지 않고 새로고침이나 라우팅과 같은 실수로 인한 경우에만 복구가 되도록 사소하게 UX를 챙겼습니다.

여기까지가 Sprinters의 코드 블럭 개선 내용입니다! 앞으로도 꾸준한 업데이트를 통해 최상의 글쓰기 환경을 제공하고, 오래 몰입할 수 있도록 만들겠습니다.

Sprinters가 궁금하신 분들은 한번 구경오시거나, 기록까지 남겨주시면 정말 감사하겠습니다. 😊

• https://www.sprinters.run/

최근 서비스의 엣지 케이스, 보안 등을 열심히 신경쓰면서 동시에 홍보도 하고 있어요. 커뮤니티 플랫폼에서 홍보글을 올리다가 이번에는 카카오톡 오픈 채팅방을 노려봤습니다. 카카오톡과 같은 소셜/메신저 플랫폼에서 링크를 공유하면 카드형태로 썸네일과 제목 등이 표시가 되죠. 그런데 공유할수록 뭔가 미리보기 이미지가 무거운 느낌이 들더라구요.

열심히 뛰는 모습과 모던한 느낌이 제 서비스와 어울린다는 생각이 들어서 사용을 했었는데, 제 3자 입장에서는 뭔가 글을 쓰기도 전에 힘들다? 무겁다?라는 인상을 받을 것 같았어요.

게다가, 히어로 이미지로도 사용을 하고 있었는데 비슷한 피드백까지 받게 되었어요. 땀흘리는 마라톤 선수 배너가 반감을 일으킨다고... 해서, 미리보기 이미지와 히어로 영역을 대규모 개편을 하였습니다. 좀 더 가벼운 느낌이지만, 깔끔하고 요즘 스타일?처럼 보이게 제 나름대로 노력을 한 결과물이 아래의 모습이에요.

저 혼자였으면 절대 몰랐을 부분들을 실제 사용자들의 피드백을 통해서 방향성을 다시 잡게 되었어요. 게이미피케이션 요소를 넣어서 좀 더 가볍고, 브랜딩이 명확해졌다고 개인적으로는 생각하고 있습니다. 😅 공유 카드 UI도 이제는 아래처럼 표시되구요, 덕분에 더 잘어울리는 메인 카피도 만들어서 현재는 꽤 만족하고 있습니다.

기술 블로그 또는 학습/글쓰기 플랫폼을 고민하고 계신다면, Sprinters도 한 번 놀러와주세요. 미리보기 이미지의 탄생 과정 관련 글은 ChatGPT 이미지 2.0 덕테이프 사용기에서 확인하실 수 있어요.

감사합니다.

그런데 꾸준히 기술 관련 블로그 글을 쓰다보니, 여러 아쉬운 점들이 생기기 시작하더라구요. 그렇다고 다른 플랫폼으로 옮기기에는 그동안 쓴 글들이 있었고, 옮겨서 얻는 메리트가 크지도 않았죠.

그래서 만들었습니다. 기술 블로그

결국 만들었어요. 처음엔 기술 블로그는 아니었는데, 글쓰기를 중심으로 가다보니, 기술 블로그 플랫폼으로 기울게 되더군요. 그래서 제가 원하는 기능과 취향을 모두 담아서 만들었습니다. 코드 블럭? 예뻐요. 인라인 코드도 넣을 수 있어요. 이미지 최적화 되구요. 드래그로 바로 추가할 수도 있습니다. 미리보기가 필요없을 정도로 작성 화면과 작성된 화면에 통일성을 갖도록 했어요. 그래서 미리보기 버튼을 클릭할 필요도, 왼쪽/오른쪽 화면을 번갈아 볼 필요도 없습니다.

독자가 내용에 집중할 수 있도록 스크롤을 내리는 중에는 헤더가 숨겨지도록 했어요. 제 나름대로 PC, 태블릿, 모바일 화면의 최적 너비와 글씨 크기를 찾아 가독성을 높이려고 했습니다. 😅

작성한 내용을 최대한 보존할 수 있는 방법도 많이 고민했어요. 애써 작성한 내용들이 날아가면, 그만큼 화나는 일도 없죠. 실제로, 제가 카페에서 몇 시간을 작성한 글이 날아간 적이 있어요. 그래서 엄청 신경을 썼습니다. 작성 중인 글은 초안으로 자동저장이 되고, 인터넷이 끊기거나 오프라인 상태에서는 사용자가 알 수 있게 토스트를 띄우고 다시 인터넷이 연결되면 이어서 작성할 수 있게끔 만들었어요.

개인 블로그라고 생각하면서 약 3~4개월 동안 혼자 열심히 만들고, 혼자 글을 써왔어요. 티스토리를 이용했을 때처럼 꾸준히 글을 쓰다보면 사용자가 유입이 될 거라고 생각을 했죠.

사용 좀 해주세요...

근데..혼자 사용하기 솔직히 좀 외롭습니다. 사용자들이 좀 있으면 좋을 것 같아요..제 나름대로 홍보도 하고 그랬는데, 유입이 잘 안 되더군요. 만약 사용할 기술 블로그를 아직 안 정하셨다면, Sprinters도 고려해주세요. 🙏

대표적인 기술 블로그 후보들

기술 블로그 후보에서 가장 많이 언급되는 5대 후보예요.(직접 개발은 논외) 제 주관적인 의견이니 참고만 해주세요.

• 벨로그 -> 부트캠프 회고, 면접 후기글이 많음. 다양한 활동 글들도 많고, 유명 개발자분들도 계셔서 학습에도 좋음. 가장 가볍게 시작하기 좋고, 안정적인 선택.
• 티스토리 -> 거대 기업이 껴있고, 안정적이고 오래 운영이 될 가능성이 높음. 개인 블로그 성향이 강하고 광고를 달아서 부수입을 얻을 수 있음.(지금은 티스토리측에서 가져가는 것도 있는건지 광고비 자체가 많이 줄어듦.) 커스터마이징이 자유롭고, 통계가 잘 되어 있음.
• 미디엄 -> 좀 더 전문적이고 진중한 느낌. 코드 블럭이 좀 투박함.
• 브런치 -> 한국판 미디엄? 이미지 최적화가 오랫동안 안 됐던 걸로 기억함. 아직도 그런지는 모르겠음. 요즘은 브런치를 이용하는 사람들이 꽤 많은 것 같음.
• 네이버 블로그 -> 기술 블로그와는 좀 멀지만, 다양한 선택지 중 하나.

제 첫 번째 목표는 이 후보들 사이에 끼어서 6대 후보가 되는 거예요. 기술 블로그 후보들 중에 Sprinters도 언급이 되면 좋겠다는 게 현재 제가 가장 간절히 원하는 소망인 거죠.

금방 접는 거 아니야?

저 생각보다 진심입니다. 정말 오래오래 운영할 생각이구요, 저도 사용하는 서비스인만큼 완성도 있는 서비스로 자리매김을 하고 싶어요. 아직 이르긴 하지만 사용자가 많아지면 더 좋은 서버로 이전하고, 비즈니스 모델도 나름 생각해둬서 사무실도 구했습니다.

여러분의 도움이 필요해요. 소통 창구도 마련되어 있으니, 원하는 부분이 있다면 언제든지 제안해주세요. 저는 요즘 거의 하루종일 Sprinters 생각만 해요. 여러분도 공개적으로 학습하는 것과 기록의 중요성을 느끼신다면, Sprinters도 한 번 고민해주세요. 감사합니다.