UXUI 스터디 사이트 'NOTE:D' 개발 후기

과거 나는 약 2년 정도 같은 직무의 분과 함께 UXUI 관련해서 스터디를 진행했다.

서로 관심있는 분야 공부해서 글로 정리하고 매주 주말에 만나서 토론하는 형식의 스터디를 했었는데,

최근에 대학원에서 수업을 들으랴.... 연구과제하랴.... 여러가지를 바쁘게 병행하느라 UX관련 스터디를 하지 못했다...

힘듦의 기록..

다행히도(?) 같은 스터디원분도 계속 야근하시고 바쁘셔서 서로 미루고 미루다 약 4달정도 스터디를 하지 못했다. ㅋㅋㅋㅋㅜㅜㅜ

진짜 다음 달부터는 진짜다 진짜하자 이렇게 계속 미루다보니까 절대 둘 다 안정되지 않을 것같아 새로운 방법을 고안해내고자 했다. 여태까지 했던 스터디를 끊기엔 너무 아깝기도 하고 이렇게라도 강제성이 주어지지않으면 공부를 게을리 하기에... 한 일주일간 생각을 곰곰이 했다.

 

---

 

스터디가 무엇이 문제였을까? 😰

해당 스터디가 원활하게 진행이 안되는 점을 먼저 분석해봤다. 보통 패턴이 있었다.

1. 공부를 해서 미리 포스팅을 했지만 너무나 바빠 주말에 시간이 안된다.
2. 한 주간 삶이 너무나 고돼서 아예 공부를 하지 않았다.
3. 그냥(?) 주말에 만나는걸 까먹었다.

이런식이었는데 이 3가지의 공통된 점은 현생이 바빠 정신이 없어서 에너지를 스터디에 들이기 힘들다는 점이었다. 근데 그게 공부의 문제 보다는 주말에 시간을 따로 빼서 만나는게 더더욱 어려운 점이었다는 것이다.

 

그렇기에 우선 표면적으로 가장 먼저 보이는 문제인 고정된 시간 확보부터 없애보자고 생각했다.

그렇다면 주말에 직접 만나는 것을 없애려면 어떻게 해야 할까? 가장 간단하게 떠올릴 수 있는 방법은 온라인에서 각자 작업하는 것이었다.

 

우리 스터디는 처음에는 Notion을 활용해 글을 정리하고 관리하는 방식으로 진행했다. 하지만 Notion 무료 버전은 저장할 수 있는 데이터에 한계가 있었고, 여러모로 아쉬운 점이 있었다. 결국 각자 자신의 블로그에 글을 작성하고 관리하는 방식으로 바뀌게 되었다.

 

그러다 보니 스터디원들의 글을 한곳에서 확인하기 어렵다는 아쉬움이 계속 남아 있었다. 마침 스터디를 리뉴얼하는 시점이기도 했기에, 이번 기회에 아예 스터디를 위한 웹사이트를 새로 만들어보면 어떨까?라는 생각을 하게 되었다.

 

---

그렇게 탄생한 NOTE:D 🎉

https://note-d.co.kr/

Note:D — Design Notes on UX/UI

 

스터디를 진행할 수 있는 아카이브이자 맴버 관리 발행까지 가능한 NOTE:D 사이트를 만들었다!

이전에 진행한 기록물들을 모두 이전해오면서 기능을 구현했는데, 사이트 자체는 간단한 로직을 만들고자했다.

1. 아티클들이 잘 관리 될 수 있도록 보관 장소를 만들 것.
2. 아티클 발행이 원활하도록 에디터를 직접 구현해서 사이트 내에서 작성 가능하게 할 것.
3. 스터디 확장성을 고려하여 맴버 관리를 할 수 있을 것.
4. 오프라인 소통이 없어진 만큼 댓글로 소통을 할 수 있을 것.

뭐 생각해보면 평범한 사이트라고 할 수 있다. 하지만 이렇게 과거의 기록까지 한 번에 볼 수 있으니 만들고 나서 뿌듯함이 느껴졌다.

만들면서 디테일한 것과 어떻게 데이터를 관리할 것인가 그리고 어떻게 하면 맴버들이 편하게 쓸 수 있을 것인가를 고려를 많이 했고, 이 과정이 나는 너무나 즐거워서 새벽 6시까지 도파민에 휩싸여 잠을 안자고 계속 이 사이트를 구현했다.

 

그래서 그런지 생각보다 빠르게 약 3일 정도만에 사이트를 완성했고 도메인을 사서 배포까지 일사천리로 운영할 수 있게 되었다ㅎㅎㅎ

 

사이트를 제작하면서 디테일 한 것들을 신경쓰게 되었는데 그 점들을 작성해보고자 한다.

---

1. 웹사이트 만들어봤자 뭐해 안볼텐데 😥

사실 이 부분이 가장 걱정이 많았다. 솔직히 말해서 웹사이트를 아무리 잘 만들어도, 화려하기만 할 뿐 정말 접근성이 좋은가?라는 의문이 들었다. 나는 그렇지 않다고 생각했다.

 

평소에 의식적으로 에너지를 써서 웹사이트에 접속하고, 새로운 아티클이 올라왔는지 확인해야 하기 때문이다. 현생이 바쁘다면 굳이 웹사이트까지 찾아 들어갈 이유가 없고, 결국 자연스럽게 잊혀질 가능성이 높다.

 

그래서 이 문제를 조금이라도 해결해보고자 카카오톡 알림 시스템을 만들었다.

AI요약 테스트 중

 

평일 오전 8시에 새로 발행된 아티클을 AI가 간단하게 요약하고 소개와 함께 링크를 카카오톡으로 보내주는 방식이다. 이렇게 하면 적어도 출근 시간에 카카오톡을 확인하면서 5초 정도라도 스터디 내용을 접할 수 있다. 내용이 궁금하다면 그때 잠깐 시간을 내어 아티클을 읽어볼 수도 있을 것이다.

 

물론 아직은 하나의 가설일 뿐이다. 하지만 이런 식으로 매일 스터디 내용을 자연스럽게 접하게 된다면, '오늘도 최소한 스터디는 해야겠다'라는 의식을 만들어낼 수 있지 않을까 생각했다. 그리고 이러한 작은 의식이 반복되다 보면 결국 별도의 노력을 들이지 않아도 지속할 수 있는 좋은 습관으로 이어질 수 있을 것이라 기대하고 있다.

 

2. 눈팅 방지와 스터디 참여율을 높이는 법? 🙄

카톡으로 매일 아티클을 알림해준다고 해도, 단순히 보기만 하고 본인은 글을 작성하지 않을 수도 있다. 그렇다면 어떻게 하면 스터디에 직접 참여하도록 만들 수 있을까?

 

고민 끝에 동기부여를 위해 GitHub의 ‘잔디’ 시스템을 가져왔다.

GitHub를 사용해본 사람이라면 한 번쯤 들어봤을 ‘잔디를 심는다’는 표현이 있다. 공부하거나 작업한 흔적인 커밋을 남기면 해당 날짜의 사각형에 색이 칠해지고, 커밋 횟수가 많을수록 색이 진해진다. 반대로 아무것도 하지 않은 날은 하얗게 남는다.

 

이렇게 몇 개월, 몇 년 동안 꾸준히 커밋을 하다 보면 수많은 초록색 사각형이 빼곡하게 채워진 모습을 볼 수 있다. 단순히 기록을 시각화한 것뿐인데도, 이 모습을 보면서 꾸준히 무언가를 해왔다는 성취감을 느끼는 사람이 많다. 동시에 다른 사람에게 자신의 활동량이나 꾸준함을 보여줄 수도 있기 때문에 자연스럽게 동기부여가 되기도 한다.

그래서 이 시스템을 우리 스터디에도 적용해봤다.

실제 구현 잔디

일주일에 한 번 포스팅하는 것을 목표로 하고, 글을 작성하면 해당 날짜에 색상이 채워지도록 만들었다. 내가 지금까지 얼마나 꾸준히 글을 작성했는지 한눈에 확인할 수 있고, 다른 멤버들은 얼마나 활동하고 있는지도 함께 볼 수 있도록 했다.

 

단순히 기록을 남기는 것에서 끝나는 것이 아니라, 성취감과 적당한 경쟁심, 그리고 함께 달리고 있다는 러닝메이트 같은 느낌을 받을 수 있도록 하는 것이 목적이었다.

 

결국 혼자 공부하는 것이 아니라, 서로의 활동을 보면서 ‘나도 이번 주에는 하나 써야겠다’라는 생각을 자연스럽게 만들어주는 것이다. 이런 작은 동기부여가 쌓이면 스터디를 꾸준히 이어가는 데 도움이 되지 않을까 생각했다.

 

3. 어떻게하면 글 작성을 편하게 할 수 있을까? 📝

요즘은 티스토리든 네이버 블로그든, 심지어 노션까지 에디터가 워낙 잘 만들어져 있다. 그렇기에 기존처럼 각자의 블로그에서 글을 작성하고, 완성된 글의 데이터만 이 사이트로 옮기는 방법도 생각해볼 수 있었다.

 

하지만 그렇게 한다면 결국 글을 두 번 관리해야 하는 이중 작업이 발생한다. 처음에는 괜찮을지 몰라도, 시간이 지나면 글을 작성할 때마다 따로 사이트에 옮기는 과정 자체가 번거로워질 것이고, 결국 또다시 '각 잡고' 해야 하는 일이 될 것 같았다.

 

그래서 아예 사이트 안에서 글을 편하게 작성할 수 있는 에디터를 직접 만들기로 했다.

 

그런데 에디터를 만드는 일이 생각보다 정말 고된 작업이었다. 실제로 이번 개발에서 가장 많은 시간을 들인 부분이기도 하다.

새로운 글 발행부터 임시 저장, 작성한 글 미리보기, 기존 게시글 편집, 이미지 삽입, 이미지 병렬 배치 등등... 막상 하나씩 구현하다 보니 고려해야 할 사항이 끝도 없이 나왔다. 게다가 에디터는 기능 하나를 추가할 때마다 예외 상황도 함께 생각해야 했고, 기능이 많아질수록 일일이 QA하는 것도 상당히 고된 일이었다. ㅋㅋㅋㅋ

 

그래도 스터디원들이 '글을 쓰기 위해 굳이 이 사이트에 적응해야 하는' 상황만큼은 만들고 싶지 않았다. 그래서 어떤 에디터를 참고하면 좋을지 고민했고, 내가 평소에도 익숙하게 사용하고 기능적으로도 잘 만들어졌다고 생각했던 티스토리 에디터를 벤치마킹했다. 결과적으로 티스토리에서 제공하는 글쓰기 경험을 최대한 참고하면서, 우리 스터디에 필요한 기능들을 하나씩 구현했다. 감사합니다, 티스토리 ! ^^b

실제 구현된 에디터

 

 

4. 초-패스트 접근성, 버그리포트 📢

예전에 게임을 하면서 접근성에 감탄을 했었던 적이 있다. 그것은 '서브노티카'라는 게임이었는데 해당 게임이 유저와 소통을 정말 잘했었다. 친목질을 잘한다는게 아니라 진짜로 모든 유저의 의견을 잘 받아들이기 위해 노력했다는 것이 보였다.

피드백 기능

보통 게임을 하다가 버그를 발견하면 이메일을 보내거나, 별도의 페이지에 접속해서 버그를 신고해야 한다. 이 과정이 생각보다 귀찮기 때문에 대부분의 유저는 그냥 불편함을 감수하고 넘어간다. 나 역시 그런 편이었다.

 

그런데 서브노티카에서는 게임을 플레이하다가 버그나 문제가 발생했을 때 단축키 하나만 누르면 바로 피드백을 보낼 수 있었다. 당시에는 F11이었는지 F10이었는지는 정확히 기억나지 않지만, 버튼을 누르면 현재 플레이 화면이 자동으로 캡처되고 그 상태에서 바로 피드백을 작성해 보낼 수 있었다. 당시에는 이게 정말 혁신적이라고 생각했고 감탄하며 박수를 쳤었던 것같다ㅋㅋㅋㅋㅋ
이런 유저 친화적인 모습이 인상 깊었고, 마침 개선됐으면 하는 부분이 있었기에 슈퍼 귀차니즘인 나조차도 기억에 남을 정도로 친절하게 피드백을 남겼던 것 같다.

 

갑자기 게임 이야기로 샜는데, 결국 내가 이야기하고 싶은 것은 완벽한 서비스는 없다는 것이다.

아무리 열심히 만들더라도 버그가 생길 수 있고, 개발자가 미처 생각하지 못한 불편한 부분도 분명히 존재한다. 그렇기에 서비스를 계속 개선하려면 실제로 사용하는 유저의 이야기를 듣는 것이 중요하다.

 

그런데 문제는 유저의 이야기를 듣는 것 자체가 생각보다 어렵다는 것이다.

대부분의 사람은 귀찮아서 피드백을 남기지 않는다. 혹은 불편하더라도 굳이 이야기하는 것 자체를 어려워할 수도 있다. 그렇다면 방법은 하나라고 생각했다. 피드백을 보내고 싶다는 생각이 머릿속에 떠오른 바로 그 순간, 최대한 적은 노력으로 보낼 수 있게 만들자.

실제 구현 버그리포트

그래서 실제 웹페이지에 ‘버그 리포트’ 기능을 추가했다. 버튼 하나만 누르면 바로 메시지를 입력할 수 있고, 현재 화면을 캡처해서 함께 첨부할 수 있도록 만들었다. 별도의 페이지로 이동하거나 이메일을 찾아갈 필요 없이, 불편함을 느낀 그 자리에서 바로 피드백을 남길 수 있도록 만든 것이다. 결국 이 기능의 핵심은 거창한 버그 리포트 시스템이 아니라, ‘귀찮아서 말하지 않는 것’을 최대한 줄이는 것이었다.

---

이렇게 해서 NOTE:D는 간소하지만 스터디를 지속하기 위해 필요한 기능들을 갖춘 작은 스터디 아카이브로 탄생하게 되었다.

처음에는 단순히 각자의 글을 한곳에 모아볼 수 있으면 좋겠다는 생각에서 시작했지만, 만들다 보니 생각보다 많은 고민을 하게 되었다. 어떻게 하면 글을 더 편하게 작성할 수 있을지, 어떻게 하면 바쁜 일상 속에서도 스터디를 잊지 않을 수 있을지, 어떻게 하면 단순히 눈팅만 하는 것이 아니라 직접 참여하게 만들 수 있을지까지 하나씩 고민하다 보니 지금의 NOTE:D가 만들어졌다.

 

물론 아직 완벽한 서비스는 아니다. 지금 적용한 기능들도 결국 ‘이렇게 하면 조금 더 꾸준히 할 수 있지 않을까?’라는 가설을 직접 실험해보는 과정에 가깝다. 실제로 몇 달, 몇 년이 지나도 지금처럼 꾸준히 운영될 수 있을지는 나도 아직 모른다.

 

그래도 적어도 이전보다 스터디를 지속하기 좋은 환경은 만들어졌다고 생각한다. 앞으로 어떤 방식으로 변화할지는 모르겠지만, 멤버들과 함께 계속 글을 작성하고 조금씩 개선해 나가면서 좋은 방향으로 오래 이어갈 수 있는 스터디가 되었으면 좋겠다.

 

 

혹시나, 이 글을 읽으시는 분들 중 관심 있으신 분이 있으시다면 평일 오전 아침에 아티클 소개해주는 오픈 카톡방이 있으니 편하게 들어오셔도 괜찮습니다. 오픈 카톡방에서는 알림 말고 대화는 없으니 편하게 아티클 알림을 받아보고, 마음에 드는 글이 있다면 읽어보는 정도로 가볍게 이용하셔요!

https://open.kakao.com/o/gaQwl9Ki

NOTE:D