이번에 정말 많은 기능 수정과 추가를 했습니다. '이정도면 됐겠지' 싶다가도, 계속해서 개선해보고 싶은 것들이 생기네요. 자잘한 업데이트도 많지만, 큼지막한 업데이트 위주로 말씀드릴게요.
디자인
제가 미적 감각이 워낙 부족한 사람이라, 수정을 정말 많이 했습니다. 기존 홈 화면 먼저 보실게요.
완전 초반 홈 화면이네요. 나름 깔끔하게 잘 구성했다고 생각해요. 다만, 시간이 지날수록 프로토타입 수준이라는 느낌이 계속 들더라구요. 이때는 뭔가 더 실제 서비스 느낌을 내야겠다는 생각이 강했던 것 같습니다.
나름 큰 변화를 준다고 줬던 게 히어로 이미지와 헤더 네비게이션이었나 봅니다. 히어로 이미지는 Unsplash에서 가져왔어요. 서비스의 정체성을 잘 나타내는 것 같아서 개인적으로 아주 마음에 듭니다.
Sprinters 서비스의 방향성을 잡아야겠다는 생각이 들었고, 기록을 중심으로 확장해나가야겠다는 생각이 들었어요. 그래서 메인에 기록 목록을 최신순으로 배치했어요. 나름 과감하게 결정을 했는데, 현재까진 이 방향대로 잘 진행하고 있다고 생각합니다.
목록의 항목들이 카드형 UI였는데, 여기서도 고민이 많았어요. 초반에는 이미지 첨부 기능도 없었고, 이미지를 첨부하지 않는 경우도 생길텐데 이걸 어떻게 처리해야할까를 생각보다 엄청 고민했어요. 벨로그처럼 이미지가 없을 경우 이미지 영역 자체를 제거하는 선택지도 있었지만, 저는 이상하게 그게 더 어색하더라구요.
적당한 기본 썸네일을 만드는 것도 은근히 어려운 작업이었습니다.(디자이너 분들 리스펙..) 기본 썸네일이 반복될 때, 너무 화려해도 이상하고 심플해도 이상했어요. 위 이미지의 기본 썸네일에 있는 체크 플래그는 결승선을 의미하구요, 제 나름대로 기본 썸네일에도 Sprinters 브랜딩/정체성을 갖게 하려고 노력을 했습니다..🤣
별의별 시도들을 하다가, 현재는 결국 단색으로 처리를 해뒀어요.(??)
자, 현재 홈 화면입니다. 이제 제법 실제로 운영하는 서비스 같지 않나요?? 저는 마음에 듭니다. 😁 많은 부분들을 덜어내고, 기록/글쓰기 도메인을 중심으로 재구성을 했어요. 기존에는 Q&A, 미션과 같은 여러 도메인이 있어서 이것저것 기능 추가하고, 개선하느라 정신이 없었는데요. 지금은 하나의 도메인을 중심으로 만드니까 더 깊이, 신경써서 만들게 되더라구요. 애매한 포지션이 지금은 자리를 잡았다고 해야할까요. 확장 방향도 좀 더 선명해졌습니다.
기록
저는 4년 넘게 티스토리를 이용해왔어요. 그동안 꾸준히 글을 써오면서(200+), 제 취향이 담긴 블로그를 직접 만들고 싶다는 생각이 들었어요. 그래서 기록에 제가 필요로 하는 기능을 모두 담았어요.
임시저장, 자동저장(초안)
임시저장 기능도 열심히 만들었는데, 현재는 자동저장만 돼요. 티스토리처럼 사용자가 임시저장을 할 수 있도록 만들었었는데, 그것도 신경쓸 필요가 없도록 현재는 자동저장이 되고, 애써 작성한 기록이 최대한 날아가지 않도록 노력했어요.
사실 자동저장 기능은 저의 희생으로 인해 생긴 기능입니다. 생각은 하고 있었지만, 임시저장 기능이 있기 때문에 그렇게 급하진 않았는데요. 제가 애써 작성한 기록이 날아간 적이 있어서 빠르게 도입했습니다. 😇 스타벅스에서 글을 열심히 쓰다가, 갑자기 와이파이가 안 되는거예요. 인터넷이 안 되는 상황에서 내가 쓴 내용들이 모두 날아갈까봐 당황한 나머지 임시저장 버튼을 눌렀는데, 에러가 발생했지 뭡니까.
그래서 지금은 자동저장이 되구요. 인터넷이 안 되는 상황에서도 해당 페이지를 벗어나지 않고, 다시 인터넷 연결이 되면 자동저장이 활성화되는 식으로 구현을 해놨습니다.
참고로, 자동저장된 초안은 프로필 드롭다운 메뉴의 기록 초안에서 불러올 수 있고, 기록 수정은 해당 글의 수정 페이지에서 자동으로 불러와져요.
토픽(태그였던 것)
기존에는 단순히 태그를 걸어놓고, 맥락을 파악할 수 있는 용도로만 사용을 했어요. 근데 이게 좀 아쉬워서 좀 더 큰 범위의 카테고리인 토픽(주제)을 정해서 데이터를 쌓아둬야겠다 싶더라구요. 토픽을 통해서 개인화된 추천 알고리즘을 만들어볼 수도 있고, 인기 토픽들을 모아두거나 토픽별 기록들을 검색하게 만들 수도 있어서 꽤 유용할 거라 생각했어요.
토픽을 추가할 때는 새로운 토픽인지 아닌지 알 수 있고요, 사용된 토픽의 개수도 확인할 수 있어요. 이렇게 하면 더 자주 사용된 토픽으로 몰릴 가능성이 크고 중복 토픽이 줄어들 거라 생각했어요.(띄어쓰기나 대소문자 차이로 인한 중복)
이미지 최적화
이미지 최적화도 빠르게 도입을 해야겠다고 생각을 했어요. 사용자 경험도 경험이지만, 현재는 스토리지가 무료 플랜이라 크기가 큰 이미지는 부담스럽거든요. 사용자가 많아지기 전에는, 이미지 최적화로 해결을 하려고 했어요. 정확한 평균을 낸 건 아니지만, 15% ~ 65%까지는 용량이 감소돼요. 최대 압축을 통해 이미지 품질을 떨어뜨리기 보다는, 의미 있게 줄어들 때만 최적화하는 방식을 택해서 적절한 균형을 맞추려고 노력했어요.
Next.js의 이미지 컴포넌트처럼 서버측 이미지 최적화를 하면 좋겠지만, 현재는 클라이언트측에서 업로드 전 최적화를 하고 있어요. 그래서 작성/수정 페이지에서 이미지를 올리면, 클라이언트측(사용자 브라우저)에서 최적화 연산을 다하기 때문에, 로딩이 체감되실 수 있는데요. 그 부분도 마냥 기다리는 느낌이 들지않게 하기 위해 여러 최적화를 해놨어요.
아주 작은 저해상도 이미지를 먼저 흐릿하게 보여주고, 원본 이미지가 로드되면 자연스럽게 교체되는 blur-up 방식을 적용했어요. 교체되는 동안 글도 쓸 수 있고, 교체되는 중에는 발행을 할 수 없도록 만들었어요.
썸네일 지정, 대체 텍스트 설정
이미지가 여러 개일 때는 가장 첫 번째 이미지가 썸네일로 표시가 돼요. 다른 이미지를 썸네일로 지정하고 싶을 때는 이미지를 클릭해서 대표 이미지로 설정을 하면 됩니다. 대체 텍스트도 원래는 이미지 파일의 제목으로 채워졌었는데, 기본값을 빈 문자열로 바꿨어요. 그리고 이미지를 클릭해서 대체 텍스트를 직접 수정할 수 있도록 만들었습니다.
기타
제목, 부제목 입력 시 라벨이 표시돼요.
오른쪽 하단에 글자수도 표시돼요.
텍스트를 선택하면 텍스트 관련 버블 메뉴가 표시돼요.
빈 문단에는 플러스(+) 버튼으로 이미지나 코드 블럭 등을 추가할 수 있어요.
탭 키나 방향키로 이동하는 게 자연스러운 흐름이 되도록 신경썼어요.
소통도 중요하죠. 댓글과 답글에도 신경을 썼어요.
답글에는 마우스 호버 시, 마이크로 인터랙션이 적용되어 있어요.
답글이 많을 경우에는, 새로운 레이어의 답글 시트가 표시돼요.
이미지는 마우스로 끌어다가 바로 업로드 할 수 있어요.
본문 영역이 아니어도 위치를 계산해서, 적절한 위치에 놓여요. 위치도 표시돼요.
목차도 추가했어요.
기록 외 개선 및 추가 사항들
아..정말 많아요. 많은데, 프로필과 설정 페이지에 많은 노력을 했어요.
이것도 디자인과 레이아웃을 정말 많이 변경했는데, 지금은 만족해요. 설정 페이지에서는 내 프로필의 내용들을 수정, 추가할 수 있어요. 또한 로그인 정보를 간단하게 확인할 수 있고, 계정 삭제도 있어요. 초기에는 계정 삭제 기능도 없었어요. 😅
예전에는 깃허브 로그인만 지원을 했었는데 지금은 구글, 카카오도 가능해요. 물론, 이메일로도 가능하구요. 최근 로그인한 정보도 확인할 수 있어요. 다만, 공용 PC와 같은 곳에서는 정보 노출로 이어질 수 있기 때문에 로그아웃이나 계정 삭제 시에는 표시되지 않아요.
벌써 Sprinters를 만든 지 3개월이나 됐네요. 만드는 동안 AI 도구의 강력함을 날마다 눈 앞에서 경험을 했고, 몰입을 했던 순간들이 참 많았습니다. 이제는 코드를 거의(또는 아예) 보지 않습니다. 대부분 판단과 결과물에 대한 감독을 하는 경우가 많더라구요. 결국 결과물을 내는 건 인간의 몫이니까요.
처음에는 AI가 나보다 코딩을 잘하는 것에 대해 많은 현타가 왔습니다. 그런데 사실, 그 위에는 더 재밌는 것들이 기다리고 있더라고요. 그동안 많은 장애물들 때문에 시도해보지 못했던 것들도 해보고, 한 단계 더 높은 고민들을 해보니, 재밌어서 시간 가는 줄 모르고 만들었습니다.
이제는 정말 사용자가 필요할 것 같아요. 앞으로 만들고 싶은 것들이 사용자가 어느 정도 있어야 필요한 기능들이거든요. 혼자 사용하기엔 아깝기도 하고..ㅎㅎ Sprinters가 벨로그나 티스토리처럼 자리를 굳게 잡을 수 있도록 열심히 스프린트 해보겠습니다. 🏃🏻