해당 글은 Sprinters에서 작성한 글입니다. 원문을 보실 수 있어요. 기술 블로그를 고민 중이시라면, 스프린터스에서 각자의 속도로 기록해요.

오랜만에 업데이트 소식을 들고왔어요. 그동안 열심히 일도 하고, 기록도 하고, 자잘한 업데이트는 계속 해왔는데요. 이번에는 배지 기능을 추가하고, 꽤 괜찮은 UI/UX 개선을 해서 왔습니다. 특히 배지 기능은 예전부터 꾸준히 하고 싶은 마음이 있었는데 이렇게 소개하게 되어 기쁘네요.

어울리는 배지 디자인을 찾아서

저는 여러분이 Sprinters 활동을 오래, 그리고 계속할 수 있게 만들고 싶어요. 여러 고민 끝에 고안해낸 것 중 하나가 바로 배지 기능이에요. 그런데 배지 디자인을 만드는 게 꽤 어렵더라구요. 디자인은 제 전문 분야도 아니고, 어울리는 디자인을 만들기가 어려웠어요.

가장 처음으로 생성한 배지 디자인이에요. 잉크 스탬프 느낌으로, 글쓰기에 어울리는 디자인이긴 하지만 뭔가 임팩트가 없는 느낌이죠.

3D 배지로도 가보려고 했어요. Sprinters보다는 커머스 도메인에 어울리는 디자인이지 않나요? 그래서 이것도 탈락.

금속 테두리 덕분에 정말 배지 느낌이 나요. 하지만 어울리는지는 모르겠단 생각이 들었습니다. 이때는 '아..갈 길이 정말 멀겠구나'라는 생각을 했습니다.

초안 결정

그렇게 아이콘 형태로 만들기도 하고, 계속 생성하는 것을 반복하다가 G3 각진 인장형을 초안으로 잡고 디벨롭 해보기로 합니다.

현재 제가 획득한 배지 목록이에요. 개인적으로는 현재 디자인과 잘 어울린다고 생각하는데, 어떤가요? 여기서 하나의 배지에 단계가 적용된 게 있는데 그것도 소개해 드릴게요.

등급이 있는 배지

누적 접속일마다 배지가 바뀌는 "함께한 날" 배지를 예시로 들어볼게요. 위 스크린샷처럼 누적 접속일마다 새로운 스타일의 배지를 받을 수가 있어요.

현재는 10개의 배지가 준비되어 있는데요. 앞으로도 계속 추가될 예정입니다.

번외

스티커 형태도 생각을 해봤어요. 개인적으로 마음에 들긴 했지만, 현재 디자인이나 분위기에는 어울리지 않는 것 같아서 이것도 제외를 하게 되었습니다.

UI/UX 개선

UI도 은근 변경된 부분이 많습니다. 특히 기록 상세에서 읽기 경험을 좀 더 개선시켜보았어요. 기존 화면부터 보시죠.

저는 상세 글에는 목차가 필요하다고 생각해요. 한 번 읽고, 나중에 이해 안 되는 부분이 있을 때 목차를 보고 확인하면 좋거든요. 다만, 이게 계속 표시되어 있다보니 거슬리는 사용자도 있을 거란 생각이 들었어요. 그리고 개인적으로 좌우 밸런스가 맞지 않아 보였어요. 왼쪽의 사이드바를 펼치면 더 그래 보였죠.

그래서 목차의 톤을 낮추고, 편의성을 높여보기로 했어요.

차이점이 보이시나요? 콘텐츠에 더 집중할 수 있도록 목차의 UI 표현을 최대한으로 줄였어요.

해당 목차에 위치하면 굵은 줄로 표시되고, 마우스 호버 시 기존 목차 UI를 확인하실 수 있어요. 그리고 오른쪽 하단에 편의성 버튼도 추가를 했어요.

편의성 버튼 목록은 헤더와 함께 동작해요. 스크롤을 내리면 숨겨지고, 올리면 나타나요. 그리고 모바일에서는 하단 바 형태로 표시가 돼요.

기타

• 인사이트 페이지의 UI/UX를 개선했어요.
• 시리즈 관리가 편해졌어요. 거의 모든 부분을 수정하고, 개선했어요.
• 모바일에서 기록 카드를 누를 때 시각적인 피드백을 추가했어요.
• 댓글과 알림 동작을 개선하고, 고쳤어요.
• 기타 버그들을 고쳤어요. 유튜브 링크 복사가 안 되는 버그, 기록 상세 이미지로 인해 레이아웃 시프트가 발생하는 것을 고쳤어요.

오랜만에 업데이트 소식을 전하니 기쁘네요. 앞으로도 업데이트는 계속됩니다! Sprinters에서 함께해 주세요!

해당 글은 Sprinters에서 작성된 글입니다. 스프린터스에서 다양한 글을 확인해 보세요.

평소에는 유튜브에 OpenAI 영상이 올라오면 건너뛰거나, 나중에 볼 동영상으로 저장해놓곤 합니다. 그런데 이번에는 그냥 지나칠 수 없더군요. 그건 바로 GPT-6 Astra 영상이었습니다.

올해 GPT 6.0이 나온다는 건 들었었는데, 이렇게 빨리 출시할 줄은 몰랐어요. 그래서 영상을 본 후, 간단히 사용해본 후기를 작성해보았습니다. 참고로 이 글의 제목은 해당 영상의 댓글 중 하나를 그대로 옮겨봤어요. "We got GPT 6 before GTA 6".

어떤 점들이 좋아졌나

출처: OpenAI 유튜브

영상에서 GPT-6는 이전에는 불가능했던 작업들이 이제는 가능해졌다고 소개합니다. 런던을 시대별로 볼 수 있는 3D 화면으로 시작 되는데요. 실제로 플레이가 가능한 게임으로 만들었더라구요. 3D 생성 능력도 좋아졌단 걸 표현하고 싶었던 것 같습니다.

게임은 잘 만들까?

그래서 저도 3D 게임을 만들어달라고 해봤습니다. GPT-6 Astra 모델, 추론 강도는 High로 설정한 후 다음과 같이 프롬프트를 넣었습니다.

"방향키로 비행기를 조종하는 3D 게임을 만들어줘. 이륙부터 착륙까지 가능하게 만들고, 곳곳에 게임적인 요소들을 넣어줘."

단 한 번. 단 한 번의 프롬프트로 이런 게임을 만들어냈습니다. 만드는 데 10분 41초 걸렸네요. 실제로 플레이도 해봤습니다.

게임적인 요소들을 알아서 넣어달라 했는데, 꽤 재밌는 것들이 많았어요. 특히 게임 UI가 눈에 띄더라구요. 미니맵부터 도전 과제, 단축키 등을 한 눈에 파악할 수 있어서 쉽게 적응할 수 있었습니다.

스카이 링을 연속으로 통과하면 콤보 점수도 있고, 위 스크린샷처럼 1인칭 시점으로도 플레이 할 수 있습니다. 은근 깨알 요소들이 있어요. 그래서 재밌습니다.

결국 끝까지 플레이 해버렸습니다. 사실 한 번에 깨진 못했구요. 몇 판 했어요. 이거 나중에는 2인 게임으로 만들어서 같이 플레이해도 재밌을 것 같다는 생각이 들었습니다. 이제는 정말 원하는 게임을 내 생각대로 만들 수 있는 시대가 되었나봅니다. 신기하고, 재밌습니다.

웹사이트 디자인

출처: OpenAI 유튜브

웹사이트 디자인도 잘 만들어준다고 합니다. 사실 이게 가장 기대가 되는 부분이었어요. 저한테 가장 필요하고, 도움이 되는 부분이라고 생각을 했습니다. 이번에는 이렇게 프롬프트를 작성해봤어요.

"초코라떼 웹사이트를 하나 만들어줘. 초코라떼를 좋아하는 사람의 심리를 자극하는 디자인으로 만들어줘."

이번에는 8분 정도 걸렸네요. 그런데 뭔가 좀 아직 AI 티가 나는 디자인이라, 한국 감성 카페에 가까운 디자인으로 수정해달라고 요청해봤습니다.

제가 디자인을 잘 모르지만, 뭔가 더 나빠진 것 같습니다. 이번에는 OpenAI 유튜브 영상에서 캡처한 말차 웹사이트를 레퍼런스로 줘봤습니다.

레퍼런스를 주니 확실히 나아진 느낌이네요. 그래도 아직 아이콘 사용이라던지 문구들은 AI만의 어색한 부분들이 있네요. 그래도 역시 GPT가 이미지 생성은 정말 잘합니다.

일상적인 실무에도 가깝게

이번에 새로 알게된 건데, 스프레드시트나 PPT, 문서를 만들 때 위 스크린샷처럼 템플릿을 제공해줍니다. 이제는 코딩에서 더 나아가, 일상적인 실무에 필요한 결과물을 만들 때 도움을 주는 도구로써도 발전하고 있습니다.

분석용 엑셀을 만들거나 보고서, 발표 자료 등을 만들 때 유용하겠네요.

Sprinters에도 사용해보자

이대로 끝내기에는 아쉬워서, Sprinters에도 Astra를 사용을 해봤습니다. 내 목록 페이지에는 시리즈 탭이 있습니다. 해당 경로의 UI/UX가 좀 아쉬웠어요. 기존 디자인부터 보시죠.

여러 프롬프트를 거쳐서 만족할만한 수준까지 만들었습니다.

GPT 5.6 Sol도 꽤 만족했었는데, GPT 6 Astra 모델은 짧게 사용해봤지만 왠지 좀 더 요청을 잘 이해하는 듯한 느낌이 들었습니다. 그리고 제 기억에는 공통 컴포넌트를 만드는 기준은 따로 설정해놓지 않았고, 원할 때만 명시해서 만들곤 했었는데요. 상황에 따라 공통 컴포넌트까지 만들기도 했습니다.

간단하게 말해, 더 적은 노력(프롬프트)으로도 충분히 잘 구현해 주는 것 같아요.

마치며

이렇게 GPT 6.0 모델인 Astra 간단 사용 후기를 작성해봤습니다. 발전 속도가 정말 무섭네요. Claude의 Fable 5.1이 나오기 무섭게 GPT도 6.0 버전을 내놓았고, 구글은 Gemini 3.7 Flash를 발표한 지 3주만에 Gemini 3.8 Flash를 공개했습니다.

GPT-6 Astra 영상에서 나왔듯이, 앞으로도 "이전에는 불가능했던 작업들이 이제 가능해지는" 일이 계속될 것입니다. 오늘은 가능해진 그 일들을 해보고 하루를 마무리해야겠습니다.

해당 글은 Sprinters에서 작성한 글입니다. 원문을 보실 수 있어요. 기술 블로그를 고민 중이시라면, 스프린터스에서 각자의 속도로 기록해요.

해당 글은 Sprinters에서 작성된 글입니다. 스프린터스에서 다양한 글을 확인해 보세요.

ChatGPT의 이미지 2.5가 출시되었습니다. 이미지 2.0이 나왔을 때도 당시 이미지 생성으로 유명했던 Gemini의 나노 바나나보다 더 잘 만들어줘서 놀랐던 기억이 있는데요. 그럼에도 사용하기 꺼려졌던 가장 큰 이유는 긴 이미지 생성 시간이었습니다.

그런데 이번에 나온 이미지 2.5는 이미지 2.0보다 이미지 생성 지연 시간이 최대 50% 단축 되었다고 해요. 이제 조금은 덜 답답할 것 같습니다. 품질뿐만 아니라, 사진 속 대상을 더 잘 보존하고 편집 지침도 더 안정되었다고 합니다.

인물과 배경 생성 테스트

더 자연스러운 질감과 풍부한 질감을 표현한다고 해서, 인물과 배경을 간단하게 정해주고 이미지를 생성해달라고 해봤습니다. 이미지 생성 기능을 켠 후, 프롬프트는 다음과 같이 요청을 해봤어요.

한국 풍경의 인스타그램 느낌으로, 자연스러운 모습이 담긴 여성의 일상 모습을 5장 생성해줘.

이미지 01

첫 번째로 생성한 이미지입니다. 이제는 정말 구분하기 힘들 정도로 이게 AI가 생성한 이미지가 맞나 싶었습니다. AI 티가 나는 부분이 거의 없는 거 같아요. 그나마 찾아 본다면 손 크기와 커피가 약간 왠지 모를 어색함이 있는 것 같습니다.

이미지 02

두 번째 이미지 역시 빠르게 보면 처음엔 진짜 같아 보입니다. 그런데 계속 보면 뭐랄까 원근감이라 하나요? 사물의 크기나 인물과의 거리, 비율이 미묘하게 달라 인위적인 느낌이 듭니다.

이미지 03

이번에는 정말 자연스럽고 어디선가 본 것 같은 느낌의 이미지입니다. 지금까지 생성한 이미지 중 가장 자연스러운 느낌이 드네요. AI 티가 나는 부분을 찾으셨나요?

이미지 04

머리카락 표현이 정말 자연스럽습니다. 정말 자세히 봐야 실제 이미지와 구분할 수 있을 것 같네요.

이미지 05

처음으로 텍스트가 포함된 이미지가 생성되었습니다. 마지막 생성 이미지라 그런지 뭔가 더 도전적으로 만든 것 같은데요. 뒷배경은 우산도 쓰고 비가 오는 것 같은데, 앞의 인물은 다른 공간에 있는 것 같네요.

이렇게 5장을 만드는 데 5분 41초가 걸렸습니다.(Astra, Medium)

이 외에도 여러 사람, 밤 배경, 카페, 인형뽑기 등 여러 시도를 해봤지만 크게 다른 점은 없었습니다.

성능 테스트

GPT 이미지 2.5에서 가장 큰 개선점은 원본을 보존하면서 원하는 부분만 정확하게 수정하는 것이라고 하더군요. 사실 처음부터 예쁜 이미지를 생성하기 보단 몇 번씩 수정을 거치면서 이미지를 완성하는데요.

이미지 2.5는 수정 대상으로 지정한 요소만 바꾸고 나머지는 최대한 그대로 유지하는 방향으로 개선되었다고 합니다. 실제 작업 흐름에서 필요한 개선으로 볼 수 있습니다.

테스트 이미지

날씨가 좋을 때 찍은 사진입니다. 왼쪽 상단과 하단에 있는 것들을 제거하면 배경이 깔끔하게 잘 보일 것 같아서 제거해달라고 요청해봤습니다.

오..생각보다 결과물이 좋습니다. 제가 이 사진말고도 여러 사진으로 테스트를 해봤을 때, 제거 대상만 지정하면 이미지의 밝기가 바뀌거나 다른 부분들이 살짝 다를 때가 있었습니다. 정확한 수정을 원한다면, 이미지의 색상과 조도 등 나머지는 그대로 유지해달라는 프롬프트도 추가하면 좋습니다.

이 상태에서 제 상상력을 좀만 가미해 보겠습니다.

선사시대 생물이 숨 쉬는 호수 풍경

기존 이미지의 배경은 그대로 유지한 채, 공룡들이 숨 쉬는 호수 풍경으로 만들었습니다. 생각보다 이미지 생성, 수정 능력이 좋아서 꽤 다양한 시도들을 해볼 수 있을 것 같네요. 의외로 재밌고 속도가 빨라서 하루 종일도 할 수 있을 것 같습니다.

구름 사이로 쏟아지는 빛 갈래

이번에는 호수 배경을 그대로 유지하고, 압도적인 하늘 풍경으로 만들고 싶었습니다. 배경 뒤편의 산이 조금 바뀌긴 했지만, 아파트는 그대로 있네요. 그리고 호수에 비친 빛 표현 보이시나요? 이번 이미지 2.5 모델은 확실히 "이것만 바꾸고 나머지는 건드리지마"가 잘 되는 게 핵심인 것 같습니다.

포스터 제작

마지막으로, 포스터 생성도 요청을 해봤습니다. 이번에 성능뿐만 아니라 UX 측면에서도 업데이트가 되었습니다. 템플릿 선택이라던지 후속 질문 UI가 추가돼서 더 쉽게 결정할 수 있게 되었어요.

완성 후 포스터를 새로 만들고 싶은데 질문을 해달라고 요청하면 위 스크린샷과 같은 UI가 표시됩니다.

마치며

Astra에 이어 Images 2.5까지 테스트를 해보았습니다. 최근 ChatGPT가 코딩과 이미지 생성 모두에서 발전 속도가 꽤 빠르다는 느낌을 받는데요. 실제로 '이제는 여기까지 되는구나'라는 생각을 하게 만드는 지점들이 있었습니다.

Sprinters에도 적용할만한 부분들을 고민해봐야겠네요.

해당 글은 Sprinters에서 작성한 글입니다. 원문을 보실 수 있어요. 기술 블로그를 고민 중이시라면, 스프린터스에서 각자의 속도로 기록해요.

버리기 아까운 글들

4년 넘게 써온 200개가 넘는 글들을 버리기에는 사실 너무 아쉬웠어요. 그래서 언젠가는 옮겨야겠다는 생각이 들었고, 결국 구현했습니다.

기록 옮기기 기능은 내 목록 페이지의 "기록 옮기기" 탭에서 하실 수 있어요. 티스토리에는 데이터 백업 기능이 있는데요. 그동안 작성한 모든 글들을 내보내서 zip 파일로 받아볼 수 있습니다. 아래처럼 사이트 내에서 준비 방법 가이드도 보실 수 있어요.

zip 파일을 받았으면, 이제 해당 페이지에서 옮기기만 하면 됩니다. "ZIP 파일 선택" 버튼을 클릭하시면 돼요.

그럼 아래에 이렇게 꽤 빠른 속도로 초안으로 보낼 글 목록들이 표시됩니다. 기록 옮기기 버튼을 클릭하면 바로 발행이 되진 않구요, 초안으로 옮겨지게 되어서 확인이나 수정 후에 천천히 발행하실 수 있습니다.

위 스크린샷처럼 차례대로 옮겨지게 됩니다.

옮겨진 기록들은 모두 초안 목록으로 이동하게 되고, 바로 확인하실 수 있어요.

위 스크린샷은 초안 목록이에요. 옮겨온 기록의 경우에는 저런식으로 표시해서 구분이 가능하도록 만들었습니다.

발행일의 경우에도 원래 작성한 날짜로 할지, 현재 날짜로 발행할지 선택하실 수 있어요. 그리고 이번에 슬러그를 추가하실 수 있는 커스텀 URL도 함께 업데이트했습니다. ㅎㅎ

마무리

예전 글들을 보니까 뭔가 마음이 이상하더라구요. 특히 회고글들을 많이 썼다 보니 그때 생각도 나면서 '아 그땐 그런 생각이었구나' 싶기도 하고, 글 하나 하나에 꽤 오랜 시간 머물었습니다.

이렇게 옮겨놓으니 마음이 참 편하네요. 찝찝한 게 좀 없어졌습니다. 전 이제 나머지 글들도 모두 옮기러 가야겠습니다~

스프린터스 많은 관심 부탁드립니다!

• https://www.sprinters.run/

이번에는 타 플랫폼의 글을 옮겨올 수 있는 기능을 출시했습니다. 한 플랫폼에서 오래 글을 쓰다 보면, 그동안 쓴 글들이 아까워서 다른 블로그로 옮기기가 쉽지가 않죠.

저 역시 티스토리에서 마음에 들지 않는 부분이 있어도 4년 넘게 사용할 수 있었던 이유 중 하나가 바로 '그동안 쓴 글들이 아까워서'였습니다.

기록 옮기기 기능

기록 옮기기는 내 목록 페이지 → 기록 옮기기 탭에서 사용해 볼 수 있습니다.

내 목록 페이지 기록 옮기기 탭 화면

현재는 마크다운만 지원을 해요. 추후에는 티스토리의 내보내기(html)도 지원할 예정입니다.

UI 업데이트

• 기록 제목의 스타일을 개선했어요. 단어를 구분하면서 균형 있게 줄바꿈하도록 수정했어요.

수정 전 기록 상세 제목 화면

수정 후 기록 상세 제목 화면

• 알림의 UI를 수정했어요. 기존에는 숫자 형태였는데, 두 자릿수부터는 조금 안 이쁘더라구요. 그래서 상태점 표시 형태로 바꿨어요.

읽지 않은 알림 상태 표시점(빨간색)

• 그리고 알림에 대한 확인과 실제 클릭/탭에 대한 확인을 구분 지었어요. 알림 행의 시간 옆 표시점은 실제로 클릭을 해야 사라져요.

알림 행의 시간 옆 표시점(파란색)

이번 업데이트는 여기까지입니다. 최근에 신규 가입자분들이 많이 늘었어요. 앞으로도 책임감을 가지고 더 좋은 서비스가 될 수 있도록 노력하겠습니다. 감사합니다. 🙂

• https://www.sprinters.run/

서비스 이름은 Sprinters입니다

메인화면입니다. 다들 인생에서 더 나아지기 위해 달리고 있잖아요. 때로는 전력 질주를 할 때도 있고 느리게 갈 수도 있습니다. 저마다의 속도로 기록하고, 그 과정을 Sprinters에서 모두 담아내길 바라는 마음에서 Sprinters를 만들고 있어요.

지금 바로 가입하고, 기록할 수 있습니다

실제로 제가 계속 사용하고 있는 서비스입니다. 그동안 4년 넘게 티스토리로 글을 써오다가, Sprinters에서 글을 쓰고 있어요. 벨로그와 티스토리, 미디엄, 노트 등을 봐오면서 아쉬운 부분들을 Sprinters에 넣고 있습니다.

오랫동안 기록될 서비스

언제 사라질 지 모르는, 처음 보는 플랫폼에서 시간 내어 글을 쓰는 게 쉽지 않죠. Sprinters는 7개월 간 정말 많은 시간을 투자해서 만들었어요. 안정성과 편의성을 모두 신경쓰고 있고, 앞으로도 계속 업데이트할 예정입니다.

다양한 기능

먼저 기록 작성 페이지입니다. 기록이 중심인 서비스답게 신경을 가장 많이 썼습니다. 먼저 사이드 패널부터 소개드릴게요.

사이드 패널

첫 번째 메뉴에서는 토픽을 추가할 수 있습니다. 내용과 관련된 주제들을 추가할 수 있어요. 현재는 토픽이 많지 않아서 활용하는 곳들이 적지만, 토픽들이 많이 쌓이면 개인 맞춤 글이나 급상승 토픽 등 다양한 곳에서 활용해보려 합니다.

두 번째 메뉴는 목차예요. 목차를 추가할 때마다 사이드 패널에서 목차 현황을 파악할 수 있고, 해당 제목의 섹션으로 바로 이동이 가능합니다.

마지막 메뉴는 에디터 가이드입니다. 관련 단축키, 팁 등을 볼 수 있어요. 다만 이것으로는 부족할 것 같아서 첫 기록의 간단한 온보딩을 추가할 예정입니다. 🙂

자동 저장

왼쪽 상단을 보시면 초안과 저장됨까지 표시되는 걸 보실 수 있습니다. 자동 저장은 특히 신경을 많이 썼어요. 기록을 작성하는 동안에는 내용이 사라질 위험이 없도록, 기록에만 집중할 수 있게 만들었어요.

제가 실제로 Sprinters를 이용하면서 카페에서 글을 쓰다가 갑자기 와이파이가 끊겨서 내용이 다 날아간 적이 있거든요. 😇

자동 저장은 인사이트를 얻을 때마다 조금씩 보강하고 있습니다. 오늘은 타락한스벨트전도사님의 [프론트 면접] 자동 저장 어떻게 구현하실 건가요? 글을 보고 개선해보려구요. ㅎㅎ

기록 경험

각 문단마다 플러스 버튼이 생겨요. 버튼을 클릭하면 위 스크린샷과 같이 다양한 메뉴가 뜹니다. 이미지부터 표, 제목, 인용, 코드 블럭까지 다양하게 추가할 수 있습니다. 특히 코드 블럭 편집과 이미지 편집은 꼭 한 번 사용해보세요. 🤩

텍스트 셀렉트 메뉴도 있어요. 이건 텍스트 관련 메뉴들이에요. 인라인 코드나 링크, 볼드, 이탤릭체를 적용할 수 있습니다. 아, 그리고 이 메뉴들은 모두 단축키로도 적용 가능합니다.(사이드 패널의 에디터 가이드 탭에서 확인 가능해요~!)

발행하기 전, 마지막 한 단계가 더 있어요. 썸네일을 설정할 수 있고, 제목과 부제목, 그리고 토픽도 발행 전에 검토할 수 있습니다. 썸네일은 해당 화면에서도 설정 가능하지만, 작성 중에 이미지를 추가해서 해당 이미지를 선택한 후 대표 이미지로 설정하면 자동으로 썸네일이 적용됩니다.

해당 화면에서는 더 다양한 메뉴들을 추가하려고 해요. 예를 들어 URL의 슬러그를 설정할 수 있게 만든다거나, 기록 발행 예약, 공개 여부 등을 여기서 처리할 수 있도록 만들 예정입니다.(여러분들의 적극적인 참여가 필요해요..!)

빠른 초안 목록

기록 버튼 옆에는 초안 목록을 빠르게 확인할 수 있는 버튼도 있어요. 더보기를 누르면 초안 목록 페이지로 이동하구요.

알림

알림 기능도 역시 있습니다! 알림도 추가하고 싶은 기능이 참 많은데요..첫 가입자의 이탈 방지를 위한 장치들을 여기서 더 많이 만들어보고 싶어요. 사용자를 붙잡는데에는 이 알림이 참 중요한 것 같더라구요.

더 다양한 알림을 추가하고, 알림과 연계되는 뱃지 기능 등 성능과 안정성을 함께 챙기면서 추가해보려 합니다.

프로필 페이지

프로필 페이지에서는 내 기록과 소개, 간단한 프로필 정보들을 볼 수 있습니다. 내가 잘 쓴 기록이 있다! 하면 고정도 해둘 수 있구요. 팔로잉도 가능합니다.

인사이트 페이지

내 기록의 통계를 볼 수 있는 페이지예요. 여기서도 개선해볼 수 있는 것들이 참 많은데..! 제가 생각한 것들을 하루 빨리 보여드리고 싶네요. ㅎㅎ

기술 블로그 찾으세요?

Sprinters는 앞으로도 계속 꾸준히 업데이트될 예정입니다. 저는 이 서비스를 오래오래 사용하고 싶어요. 아직도 갈 길이 멉니다. 다만 이 과정을 함께할 분들이 필요해요. 여러분들이 시간 내어 글을 작성해주시고, 함께 성장해주셨음 합니다.

구경이라도 한번 와주시면 감사하겠습니다. 그리고 기존 플랫폼에서 글들을 쉽게 이전할 수 있도록 관련 기능도 추가를 해보겠습니다. 감사합니다.

https://www.sprinters.run/

원문은 Sprinters에서 확인하실 수 있습니다.

몇 달 동안 Sprinters에만 시간을 쏟았었는데요. 그때는 하루에 몇 십번씩 업데이트를 했던 것 같습니다. 요즘은 일도 같이 병행하다 보니, 많진 않지만 기능 하나하나 디테일하게 신경써 가면서 추가를 하는 중입니다.

이번에는 링크 미리보기 기능을 추가했어요.

https://www.sprinters.run/

벨로그에 글을 써서 효과를 좀 본 건지, 꽤 많은 분들이 가입을 해주시고 글도 써주셨더라구요. 한 분은 본인이 만든 서비스를 홍보하셨는데 링크를 붙였을 때 미리보기가 뜨지 않는 게 조금 마음에 걸렸었습니다.

이렇게 텍스트 URL 없이 적용도 할 수 있구요. URL을 한 번에 지워야합니다. URL에 타이핑을 하면 미리보기도 함께 변경되도록 해놨어요. 그리고 링크 미리보기는 한 줄에 URL만 단독으로 있어야 생깁니다.

반응형도 신경써봤어요. 모바일에서는 위 스크린샷처럼 보이고요. 이미지와 동일하게 선택을 한 후 위치도 이동시킬 수 있습니다.

그리고 다크 모드를 최근에 추가를 했는데, 다크 모드에서의 디자인 일관성을 조금 개선시켰습니다. 버튼의 색상이나 SVG 이미지들이 다크 모드에서 잘 안 보이는 경우가 있더라구요.

글을 자주 쓰고 싶은데, 참 바쁘네요. 한가할 때 많이 써둘 걸 그랬어요. 일이 없을 때는 일이 많길 바라고, 일이 많을 때는 일이 적길 바라네요. 그래도 꾸준히 기록하겠습니다.

개선되었으면 하는 부분이나, 기능 관련 좋은 아이디어가 있다면 언제든지 메일 주세요.

https://forms.gle/8M4euL5y2ZwpmnT97

위 폼 링크를 통해 제안해 주시면 감사하겠습니다.

원문은 Sprinters에서 확인하실 수 있습니다.

출처: Unsplash Owen Beard

VS Code의 어설픈 자동완성 도구일 뿐이었던 AI가 이렇게 빠르고 무섭게 발전할 줄은 몰랐다. 예전에는 AI가 간단한 fetch 함수 하나만 만들어줘도 치팅이라 생각해서, 일부러 직접 작성하기도 했다.

그때 나는 코드를 작성하는 것이 내 역할이라 생각했던 걸지도 모르겠다. 근데 AI가 자꾸 침범하려드니까 나도 모르게 방어기제가 나온 걸까. 이 코드마저 AI가 다 작성해 버리면 내 역할이 더 줄어들까봐 불안했다. 내가 어렵게 쌓은 지식들도 쓸모없어질 것만 같았다.

기술은 계속 발전한다. 그런데 이번에는 달랐다. 기술에 대한 두려움보다는 내 역할이 사라질 것만 같은 상실감에 가까웠다. 프론트엔드 개발 교육자로서, 내가 가르치던 지식의 가치를 모두 AI가 먹어치우는 것만 같았다.

이런 마음에 그 당시 나는 최대한 AI를 사용하지 않으려 노력했다. 그렇다고 AI 발전이 느려지는 것도 아닌데 차일피일 미루다가, 결국 남보다 대부분 늦은 시기에 AI 도구들을 사용했다. VS Code의 코파일럿이 코드 자동완성을 제안해 줘도 아주 간단한 자동완성 기능 정도만 사용할 정도였다.

그러다 처음으로 VS Code가 아닌 다른 IDE를 사용했는데, 그게 바로 커서(Cursor)였다. 커서는 VS Code와 사용성이 너무나 달랐다. 개발자를 위한 도구라는 게 느껴졌고, 사소한 차이였지만 개발자 경험을 신경쓴 게 느껴졌다.

다음 작업을 예측하고 변경 사항을 제안하는 Tab 기능 - cursor.com

뭐 결국엔 다시 VS Code를 사용하게 됐지만 이 계기로 AI에 대한 좋은 경험을 하게 되었다. 그래서 점점 AI 사용에 대한 부담이 줄어들고, 상실감은 때때로 기술의 호기심과 재미로 바뀌기도 했었다. 특히 Claude Opus 4.6이 나왔을 때는 정말 무언가를 만들어봐야겠다는 생각이 강하게 들었다.

그렇게 Sprinters를 만든 지 벌써 6개월째다. Claude Opus 4.6부터 Fable 5, 그리고 GPT 5.3부터 GPT 5.6까지 사용하며 서비스를 만들었다. AI 모델이 강해질 수록, 내가 할 수 있는 것들이 더 많아지는 느낌이다. 그때는 분명 한계가 보였는데, 얼마 지나지 않아 그 한계가 없어지기도 한다.

그래서 지금은 오히려 코드를 직접 작성할 때보다 훨씬 더 재밌고, 몰입한다. 지루할 틈이 없다. 워크트리 여러 개 생성해서 기능 개발하고, 고민하고, 수정해야하는데 심심할 틈이 어딨나. 그러고보니 애초에 나는 코딩 자체를 즐기진 않았던 것 같다. 물론 잘 작성된 코드를 보면 뿌듯한 마음이 들 때도 있었지만, 그 고통스러운 고민 과정 끝에 구현되어 잘 동작하는 소프트웨어를 보고 희열을 느꼈던 것이다.

"지금은 내 머릿속에 아이디어가 있다면 AI는 그것을 더 빠르게, 더 큰 규모로, 더 적은 장벽으로 현실에 옮기도록 도와준다. 내가 사랑했던 것은 무언가를 개발하는 일, 정신적 모델을 만들고, 아이디어의 형태를 다듬고, 흐릿한 생각을 실제로 쓸 수 있는 무언가로 바꾸는 일이었다. ... 프로그래밍 언어는 언제나 추상화였다. 그것들은 내가 레지스터와 메모리 주소, 기계어를 생각하지 않아도 되게 해주었다. AI는 또 하나의 추상화 계층이다. 물론 강력한 계층이지만, 여전히 도구일 뿐이다. AI는 내가 하는 일을 대체하지 않는다. 내가 그 일을 하는 수준을 바꿔준다."

너무나 동감한다. AI는 내가 하는 일을 대체하지 못한다. 내가 그 일을 하는 수준을 바꿔준 것이다.

내가 처음 자바스크립트를 선택하게 된 계기는 메모리와 타입을 신경써야 하는 자바가 어려웠기 때문이다. 국비지원학원을 다니면서 자바를 배웠고, 그때는 이것이 너무 어려웠다. 자바스크립트는 좀 느슨했다. 처음부터 많은 것을 요구하지 않았다. AI는 훨씬 더 느슨하다.

목표를 더 크게 잡을 수 있게 되었고, 더 대담해 질 수 있었다. 더 이상 내 아이디어를 미루지 않고 과감하게 밀고 나갈 수 있다. AI는 이런 마찰을 줄여준다.

기술이 발전하면, 추상화가 생긴다. 어쩌면 더 높은 계층의 일을 하게되어 그 아래 계층의 지식은 필요없어질지도 모른다. 그렇다고 배움을 멈춰선 안 된다. AI도 결국 도구일 뿐이고, 그 수준의 일을 하기 위해서는 그 부분에 있어서 전문 지식이 있어야한다.

AI로 동영상을 생성할 수 있다고 해서, 영상 전문가 수준의 결과를 낼 수 있을까? 결국 일정 수준 이상의 결과물을 내기 위해서는 전문 지식과 경험이 필요하다. 내 능력만큼 나온다.

안녕하세요, Sprinters를 만든 사람입니다. 저는 기술 블로그 플랫폼을 만들고 있어요. 7개월 동안 만들고, 기록하면서 점점 사용자가 생겼으면 좋겠다는 생각이 들더라구요.

중간에 열심히 홍보도 해보고, 꾸준히 업데이트를 하고는 있지만 아무도 모르는 신생 플랫폼에서 시간을 들여 글을 쓰게 만드는 게 쉽지 않더군요.

가끔 응원해주는 사람이나 가입한 사람도 꽤 있었는데요.(30명+) 저한테는 이게 또 엄청난 동기가 되어서 꾸준히 하게 되더라구요. 그래서 벨로그처럼 오래 운영해보는 게 첫 번째 목표입니다.

다만, 확실히 사용자가 있어야겠더라구요. 혹시라도 기술 블로그를 고민 중이시라면, Sprinters도 고려해주시면 감사하겠습니다.

우선 기본적인 블로그의 형태는 모두 갖췄다고 생각합니다. 검색부터 댓글, 알림, 자동 저장, 프로필 등등..근본 기능들부터 사용자 경험을 좋게 만들려고 신경을 많이 썼어요.

특히 에디터는 시간을 가장 많이 투자한 부분 중에 하나입니다. 인터넷이 끊기거나 와이파이가 잘 안 된다고 해서 에러 화면으로 던지지 않고, 내용은 유지한 채로 안내가 바로 표시됩니다. 정상적인 흐름에서는 1.5초의 디바운싱을 통해 자동 저장이 알아서 되어 초안 목록에 저장이 됩니다.

저는 개발하면서 사용해왔기 때문에 굉장히 익숙하지만, 맥락이 없는 첫 사용자에게는 익숙하지 않겠죠. 그래서 왼쪽 사이드 패널을 통해 사용법이나 팁 등을 넣었어요. 추후에는 간단한 온보딩도 추가할 예정입니다.

댓글은 보통 아이콘 클릭 시 최하단 영역으로 이동하는데요. 본문의 내용이 길 경우에는 좀 불편하더라구요. 그래서 사이드 시트를 통해 댓글로 대화를 나눌 수도 있고, 본문의 최하단 댓글 섹션에서도 동일하게 댓글을 쓸 수 있습니다.

코드 블럭도 신경을 썼어요. 코드 블럭이 예쁜 게 좋더라구요. 쉽게 수정하고, 추가할 수 있습니다.

저는 계속해서 Sprinters에 기록할 예정입니다. 한번 구경이라도 와주시면 감사하겠습니다. 최종 목표는 크게 가지려구요. 기술 블로그에서 머물지 않고, 노트나 미디엄처럼 큰 플랫폼으로 키워보고 싶습니다. 여러분도 이 과정에 힘을 보태주시면 정말 감사하겠습니다.

• https://www.sprinters.run/

하지만 사용할 수록, 부족한 부분들이 느껴지더라구요. 플랫폼마다 어딘가 하나씩 아쉬운 부분이 보였습니다. '이런 기능이 있으면 좋겠다', '이 부분은 좀 불편하네', '이건 선택할 수 있게 만들면 좋을 것 같은데..'라는 것들이요. 그래서 아쉬운 부분들을 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도 한 번 고민해주세요. 감사합니다.