[사이드프로젝트 제작기 ep. 02] 기능 개선부터 전시회 준비까지, 2차 스프린트 달리기

포스팅 보기 전 레터링 보고 가세요 ! (모바일 권장📱) 

https://www.lettering.world/

온라인 편지 아카이빙 서비스, 레터링의 릴리즈를 목표로 한 1차 스프린트까지 무사히 마치고 난 후, 앞으로 우리 팀의 Next Step에 대한 고민이 필요한 시기가 찾아왔었다. 

2차 스프린트의 목표를 수립하던 도중, 우리가 처음으로 만난 대학생IT경영학회에서 OB도 대상으로 하는 제 2회 큐시즘 전시회 참여 팀을 모집하고 있었다.

우리 레터링 서비스가 1020대 유저들을 타겟으로 하고, 일상적인 서비스가 컨셉인만큼

큐시즘 전시회 참여를 통해 서비스를 홍보하고 신규 유저를 확보해보는 것이 꽤나 좋은 기회라고 생각하고 참여를 결정하게 되었다. 

사실 전시회 참여는 아무래도 '디자이너'의 역할이 크고 해야 할 것이 많아지기 때문에 아무리 기획자랑 개발자가 전시회를 참여하고 싶어도, 디자이너의 컨펌이 필요했는데.. 🤔 우리가 '전시회.. 하고 싶긴 한데.. ! 그래도 이건 디자이너 선생님의 의견대로 하겠습니다' 라고 말했을 때, "하고 싶으면 하면 되지 ! 뭐가 문제야 💪🏻 하자 !!! "라고 말해줬던 개멋졌던 예현이의 발언이 생각난다. 

🎉 전시회 준비를 목표로 시작된 2차 스프린트

전시회 준비를 위해서 디자인 포스터, 서비스 소개글, 이벤트 기획 및 레터링 서비스 점검 등과 같은 작업이 추가적으로 필요했다. 비록 짧은 시간동안 많은 양의 테스크를 해야 해서 정신은 없었지만, 우리가 사이드프로젝트였던 만큼 별도의 보고서나 기획 문서 산출물을 제작할 기회가 없었던 것을 보완할 수 있는 좋은 기회였다고 생각한다. 이 과정을 통해 우리 서비스가 문제를 발견한 지점과, 솔루션, 그리고 타겟 등과 관련한 내용을 재정의하면서 레터링의 Identity를 한 번 더 명확하게 정리해볼 수 있었다. ◠ ‿ ◠ 

1. 👩🏻‍💻 개발 : 매끄러운 사용자 경험을 위해 기능 수정 및 반응형 제작

1차 스프린트의 목표였던 '타임라인 내의 성공적인 릴리즈' 는 더할 나위 없이 완벽했지만

전시회 준비를 위해서는 서비스 점검 차원에서도 해야 할 Task들이 많았다. 

특히, 레터링은 모바일 웹 형태로 제작되었기에 1) '드래그앤드랍'이라는 인터랙션에 대해서 디테일한 수정이 필요했다.  그리고 2) 반응형 구현이 진행되기 이전이라 기기별로 화면 UI가 조금씩 다른 이슈가 발생했다. 

아무리 전시회를 통해 사용자를 모아두어도, 불편한 서비스 경험으로 인해 아무도 재유입되지 않는다면 전시회에 참여하는 의의가 없다고 생각했기에 우선순위가 급한 부분에 대해서 빠른 기능 개선을 목표로 하는 2차 스프린트를 달리기 시작했다. 

2차 스프린트에서 해결하고자 하는 문제 상황은 크게 두 가지였다. 

문제 상황 1. [인터랙션 구동] 등록한 편지를 행성에 끌어와서 저장하는 '드래그앤드랍' 방식의 인터랙션의 매끄러운 수준이 웹과 모바일 버전에서 차이가 있었고, 또한 IOS와 안드로이드에서도 차이가 있었음

문제 상황 2. [반응형]
기기별로 화면 사이즈가 모두 달라, 화면이 잘려보이거나 특정 버튼까지 스크롤이 미달되는 등의 문제가 발생하였음

2차 스프린트에서 가장 시급하게 해결되어야 했던 부분은 '반응형' !

반응형을 구현하는 과정에서 디자이너의 화면 재디자인 작업이 필요했고,

특히, 프론트는 스크롤이 발생하는 모든 화면에 대해서 비율 재조정을 하는 작업이 필요했다.

짧은 기간동안 정말 많은 작업을 해준 우리의 프론트 선생님들께 이 자리를 빌려 고맙다는 인사를 전한다.. ✨

전시회를 준비하는 과정에서 그 누구보다 바빴을 프론트 선생님들에게 이 자리를 빌려 그 시간 동안의 이야기를 들어보고 싶다.  레터링의 인터랙션과 반응형을 구현하면서 가장 어려웠던 점, 스프린트를 통해 얻은 점은 무엇이었을까? 

🎤 개발자(프론트) 인터뷰 - 프론트의 고민 훔쳐보기

👩🏻‍🏫 "레터링에서 가장 핵심적인 인터랙션인 '드래그앤드랍'을 구현해준 프론트 승효, 웹 환경에서 일반적이지는 않은 인터랙션을 만들어내기 위해 고민이 많았을 것 같은데요"

승효 : 드래그앤드랍은 작업을 하면서 가장 애를 먹었던 부분이었어요. 초반에는 라이브러리를 활용하기로 했는데, 오류와 유지보수에 대한 고려로 라이브러리 없이 javascript event만으로 구현을 했습니다. 드래그앤드랍을 구현할 때 드래그에 해당하는 영역, 드래그하는 대상, 드래그 시 이벤트 등 고려할 점이 많았기에 초반 코드 구조를 잡는데 시간을 많이 소요했어요.

하지만 그 점이 오히려 총 코드 작성 시간을 더 줄여주었던 것 같습니다. 완성까지 상당히 시간이 걸렸던 작업이었지만 직접 모든 터치, 드래그에 대한 액션을 작성하다보니 추후 드래그 오류가 났었을 때도 원인 파악이 수월했던 것 같습니다! 제 스스로도 drag event에 대한 이해도도 많이 상승을 해서 좋은 경험이었다고 생각합니다. 

👩🏻‍🏫 "전시회를 준비하는 스프린트 도중 가장 어려웠던 점은 무엇이었나요?"

진주 : 처음 레터링 개발을 시작했을 때는 기능 위주의 개발에 집중하다보니 반응형을 고려할 여력이 없었어요. 그래서  PC에서의 웹앱 뷰와 범용적인 모바일 사이즈만 고려했었죠! 하지만, 전시회를 준비하면서 다양한 사람들의 디스플레이 크기를 고려하게 되다보니, 생각했던 디스플레이 크기보다 보여지는 서비스 화면이 작아 반응형 구현의 필요성을 느끼게 되었어요. 화면마다 break-point(분기점)을 잡고 작업해서 아이폰 5s 이상으로는 문제없는 화면를 구현했어요!

이 과정에서 반응형 웹앱을 설계하는 방법을 배우고, 고려해야하는 점들을 몸소 배울 수 있었습니다. 아쉬웠던 점이라면 컴포넌트를 처음 만들 때 반응형을 고려하지 않았다보니 편지지 줄넘김 등 로직이 더 복잡해진 부분들이 있었어요ㅎㅎ 앞으로 리팩토링하면서 더욱 유연한 코드를 만들어 나가고 싶어요:)

🗂 [기획, 디자이너] 전시회 이벤트 준비

그리고 기획자와 디자이너는 전시회에서 진행할 이벤트에 대한 기획과 굿즈 제작을 위한 회의를 바쁘게 진행했다.

전시회 참여의 1차적인 목표는 '유저를 유입'하는 것이었기 때문에 레터링을 이용해보는 시간은 필수적으로 필요했다. 어떻게 하면 부스 방문부터 이벤트 참여, 그리고 레터링을 이용해보기까지의 과정이 유연하게 이어질 수 있을까에 대해서 오래 고민을 했었다. !!! 

우리가 부스 이벤트에 있어서 고민해본 점은 아래와 같다.
- 전시회 부스가 '우리 서비스'의 의미를 잘 전달하고 있는가
- 이벤트의 깊이가 간편한가? (너무 부담스럽거나 길지는 않은가?)
- 이벤트 자체가 재미있는가
- 굿즈가 매력적인가

오랜 고민 끝에 결정된 우리의 부스 이벤트는 레터링 밸런스게임이었다 !!

• 질문카드를 하나 뽑고, 카드에 적힌 밸런스게임에 대한 답변을 고민해보는것이었다.

• 밸런스게임의 내용은 '편지'를 소재로 사랑/우정/팀워크/재미 등의 카테고리로 다양하게 제작했다. 

큰 '편지'와 관련된 소재인 동시에 사랑/우정/팀워크/재미의 카테고리로 하는 밸런스게임으로 준비해두었다.

이후, 답변과 관련해서 고민했던 내용을 담아 친구/가족/애인/동료에게 레터링에서 편지를 전송해보는 것이었다. 여기까지 진행하면, 우리 팀의 크나큰 자랑인 2025 연하장과 레터링 편지지 엽서 굿즈를 제공하였다. 

🎪 전시회 부스 소개

 전시회 당일 새벽까지도 끝없는 수정을 거치고

2024년 12월 7일 노들섬 갤러리에서 제2회 큐시즘 전시회가 열렸다.

그렇게 달려온 우리의 결과물 .. ✨

 굿즈와 부스 구성은 (팔이 안으로 굽는 것이 아닌) 우리 부스가.. 짱이었다고 말해주고 싶다.. 

이벤트의 구성부터 플로우, 부스에 방문하는 유저의 CX 경험, 테이블 배치까지..

그 무엇도 대충 한 것 하나 없이 >< 고민에 고민을 거듭했던 우리의 완벽한 부스  

 전시회 전 날부터, 당일 오전까지 그 누구보다 빨리 나와서 부스 설치를 도왔던 규리와 예현이 ! 정말 고생많았어 💗

부스 구성은 다음과 같았다. 

• 중앙 모니터에는 레터링에 대한 서비스 소개 슬라이드를 띄워두고

• 벽면에는 아이템 포스터를, 좌측에는 밸런스게임을 진행할 수 있는 보드를 마련해두었다.

• 밸런스게임을 진행한 후에 시연 기기를 통해 '레터링'을 이용해볼 수 있는 시간을 제공하였다

여기까지 진행한 부스 방문자에게는

• 레터링 편지지 엽서와

• 다가올 '푸른 뱀의 해' 를 담은 2025 레터링 연하장을 제공하였다. (디테일을 뜯어볼수록 아름다운 연하장인 것.. 엉엉)

 전시회 시기가, 기말고사랑 너무나도 겹쳐서 모두가 기말 공부 + 프로젝트와 전시회를 병행하면서 준비했었다.

그럼에도 불구하고 누구 한 명 대충 하지 않고, 레터링이라는 프로덕트와 팀 ASAP을 애정하는 마음을 담아 진심으로 임했었던 2차 스프린트. 그 어느때보다 정신없고 바빴던 스프린트였지만 덕분에 압축적이고 효율적으로 잘 마무리 될 수 있었다고 생각한다. 

이 날 진행된 밸런스게임 이벤트 내용은 '레터링 인스타그램'에 스토리 하이라이트로 소중하게 보관중이다

구경오고 싶다면 ? ->  레터링 인스타그램 보러 가기

그렇게 약 8월부터 시작된 팀 ASAP의 2차 스프린트가 마무리되었다.

2차 스프린트를 마지막으로, PM 동우의 본업 복귀 이슈로 내가 PM을 이어받게 되었으며

지금까지 꾸준히 (?) 프로젝트를 이어오고 있다.

이후의 이야기는 전시회까지 끝낸 후, 앞으로 팀 ASAP의 방향성과 3차 스프린트의 목표와 진행 상황에 대해서 공유해보고자 한다. 

[사이드프로젝트 제작기 ep. 01] 온라인 편지 아카이빙 서비스, 레터링이 만들어지기까지

24년 여름부터 시작하여 2번의 피봇과 2달 간의 압축적인 개발 스프린트를 통해, 릴리즈까지 이뤄낸
우리팀의 사이드프로젝트에 대한 이야기를 해보려고 한다.

최근에는 IT 커리어를 꿈꾸는 사람들이라면, 많이들 시도해보는 사이드프로젝트지만
꽤나 장기로, 지금까지 별 탈 없이 순항을 해올 수 있었던 프로젝트인만큼,

지금까지의 여정과 앞으로의 팀 방향성에 대한 비전을 캐주얼하게 풀어보려고 한다, 

👥 팀 ASAP (아쌉 아니고. 에이쎕이라고 불러주세요)

우리 팀 ASAP은 대학생IT경영학회(큐시즘)에서 처음 만나게 되었다. 
'기획자 3, 디자이너 1, 프론트 2, 백엔드 1'의 팀원들로, 운 좋게 일도 잘하고 놀기도 잘하는 알잘딱깔센러들이 모여있다.

무엇보다 소중한 마음을 아카이빙하는 따뜻한 프로덕트를 만드는 팀 답게,
ASAP은 배려와 존중의 문화를 바탕으로 협업의 시너지를 만들어가며 성장하고 있다 ! ! ! 

메이커들의 이야기가 더 궁금하다면 ? -> 레터링 인스타그램 팀 ASAP 소개

💻 서비스 제작 과정 소개

모두가 학부생이었기 때문에 프로젝트를 너무 길게 끌고 가기보다는, 모두가 짧은 기간의 압축적인 기획 + 개발 스프린트를 통해 임팩트 있는 결과를 만들어내기를 원했다. 따라서 사이드 프로젝트를 본격적으로 시작하기에 앞서 팀의 전체적인 목표를 합치하고 팀 문화를 세워보는 시간을 가졌다. ✌🏻따라서 프로젝트 목표는

👑 빠르게 MVP를 완성하여 릴리즈하고, 유저 VoC를 통해 서비스를 디벨롭해나가는 경험을 해보자 💪🏻  

나아가 프로덕트 아이템을 선정하는 과정에서는

릴리즈를 하기에 무리없는 수준의 주제인가 -> 저작권과 사업성 허들이 없는지 검토함

젊은 층을 타깃으로 한, 일상에서 편하고 재미있게 쓸 수 있는 프로덕트면 좋겠다!

라고 의견이 모이게 되었다. 

👥 ASAP 팀의 문화

1️⃣ 매주 1회 정기 회의 / 월 1회 '오프라인 회의' 로 텐션 유지하기

사이드 프로젝트의 치명적인 약점은 '강제성의 부족'이다. 

뚜렷한 목표나 성과가 보이지 않으면 루즈해지기 쉽고, 혹은 누군가의 이탈이 발생하는 것도 다반사다. 

이를 방지하기 위해 우리는 매주 1회의 정기회의와 월 1회의 오프라인 회의를 진행하고 있다. (2월은 못한 듯 ◠ ‿ ◠ 그대신 3월 초에 봐 ~ 얘뚜라) 

TMI로는, 최근에 내가 PM으로 승진하면서 .. 아래와 같은 세 가지 룰을 (허락없이) 도입했다.

✅ 회의는 1시간이 넘지 않도록 (아이디에이션과 발산의 시기에 놓여있는 팀이라면 장시간의 논의가 반드시 필요하지만, 지금의 우리는 효율과 각자의 작업시간을 충분히 보장해야 하는 시기라고 생각했다.)

✅ 그렇다고 너무 효율만 추구하지는 않도록 회의 시작 후 10분동안 각자 TMI + 근황 공유의 타임을 갖고 있다. (개인적으로 너무나도 만족한다! 마이크 ON 포비아 시대에 허물을 깨는 좋은 장치로 활약해주고 있다)

✅ 출시가 완료되었기에 위클리 서비스 스크럼을 하고 있다. 다양한 데이터 분석 툴을 심어서 서비스 트래킹을 시도해보고 있는데 이 방식에 대해서는 추후에 조금 더 딥하게 공유해보겠다 💪🏻 

2️⃣ 우리의 효율은, JIRA를 쓰기 전과 후로 나뉜다

처음부터 지라를 사용한 것은 아니다. 우리팀 서버 규민이가 예전부터 사용하자고 했으나, 기획자와 디자이너에겐 너무나도 낯선 툴이쟈나 ?

살짝쿵 흐린 눈 하다가

.

.

.

집중 개발 기간 이후 QA(Quality Assurance) 스프린트에는, 세부적인 이슈 + 이슈 양이 많아지면서 동일한 이슈에 대해서 반복적으로 커뮤니케이션이 발생하는 등 한계에 부딪히게 되었다. 그 때를 시작으로 지라를 본격적으로 사용하게 되었는데 혁신적으로 효율성이 개선되었다 !! 

사실 아직까지 모든 기능을 숙지한 것은 아니다. 그래도 내가 느낀 지라의 장점은 아래와 같다. 

기획자 입장에서는
- 개발자와의 명확한 커뮤니케이션이 가능 + 스프린트 관리가 용이하며, 현재 진행 상황을 트래킹할 수 있다. 
개발자 입장에서는 
- 이슈에 대해서 정리된 형태로 Categorize할 수 있으며, 지금까지의 작업 내역 + 해야 할 Task에 대해서 파악이 용이하다

짧은 기간동안 진행하는 프로젝트는 적합하지 않은 툴일 수도 있지만, 지속적인 운영과 개선이 필요한 프로젝트라면

지라를 도입해보는 것을 적극적으로 권유한다 👍🏻 우리 팀의 초반부 지라 셋팅을 잡아준 동우와 규민 Thanks ~ 

📈 [Sprint 1] 디지털 편지 아카이빙으로의 수렴 과정

IT 서비스 제작 뿐만 아니라, 팀플을 해 본 모든 사람들이라면 다 알 것이다. 

"자. 다 발산했니? 그럼 이제 수렴과 결정을 하자'가 가장 어렵다는 것. 

1️⃣ 무슨 서비스를 만들까? -> 3주의 아이디어톤

3주의 아이디어톤을 통해 서비스의 주제를 도출했다. 아이디어톤은 각 파트 팀원들이 모두 한 가지 이상의 아이디어를 가져오고 이에 대한 러프한 구상을 진행해보는 것이었다. 가장 많은 의견을 받은 아이디어를 바탕으로 애자일하게 ! 개발 구현 방식과 저작권 등에 대한 허들이 없는지 검토했고 문제가 발생하는 아이디어에 대해서는 과감하게 기각했다.

이로써 대학생들이 만들어내기에 익숙한 소재이자 누구나 쉽게 사용할 수 있는 '편지'라는 아이템을 발굴할 수 있었다.

하지만, 시작은 지금부터였다.

편지라는 아이템을 어떻게 구체적으로 풀어나가야 할지 결정해야 했다. (정말 막막했다 ◠ ‿ ◠ )

'AI 편지 보내기', '행운의 편지 돌리기' 등으로 시작하여 열심히 아이템을 디벨롭하다가 이런 논의를 주고 받게 되었다. 

편지 쓰기 이전에, 편지를 보관하는 것에 집중해보는 것은 어떨까? 🤔

손 편지를 주고 받던 시절, 많은 사람들은 박스 안에 지금껏 받은 편지들을 차곡차곡 모으고는 했다.
그러나 온라인 편지와 선물이 보편화되면서, 핸드폰 속에 수 많은 정보와 함께 이러한 추억들이 혼재하게 되었다. 

그렇다면, '디지털 편지만을 편리하게 모아둘 수 있는 나만의 공간'에 대한 니즈가 있지 않을까? 라는 인사이트를 시작으로
'온라인 편지 아카이빙 서비스, 레터링'은 시작되었다. 

 기획 초기, 많은 힘을 쏟았던 기획자들에게 이 자리를 빌려 그 시간동안에서의 각자의 이야기를 들어보고 싶다.  서비스를 만드는 과정에서의 어려움이나 가장 중점적으로 고안했던 부분은 무엇이었을까?

2️⃣  기획자 인터뷰 - 기획 초기, 기획자들의 고민 훔쳐보기

"레터링을 만드는 과정에서 가장 중점적으로 고민했던 부분은 무엇인가요?"

규리 : ‘편지’ 라는 아이템이 주는 감성을 놓치지 않기위해 노력했어요. 온라인 웹사이트이지만 아날로그적인 부분을 최대한 살리려고 했죠. 이를 위해서는 아름다운 디자인이 꼭 있어야 한다고 생각해서, 능력 좋은 디자이너를 모셨습니다.♡ 편지지 종류도 10장이나 만들었고요. 드래그앤드랍으로 직접 손가락을 움직여 편지를 정리할 수도 있게 했어요. 편지 보관을 “편하게“ 해주는 서비스는 맞지만, 마냥 “쉽고 빠른 효율”을 지향하지는 않도록 했던 것 같습니다. 편지 자체가 가지는 아기자기함을 서비스에 녹여내도록 했어요.

"기획 초기 단계에서 고민이 많았을 것 같은데요, 가장 어려웠던 부분은 무엇이었나요?"

민지 : 사실 저희 서비스는 반드시 필요한 MUST HAVE 서비스는 아니에요. 사람마다 '페인포인트'라고 느끼는 수준이 모두 다르고 따라서 이를 서비스로 풀어낸다는 것에 대한 의견 차이를 조율하는 것이 쉽지 않았던 것 같아요. 그럼에도 불구하고 저희 사이드 프로젝트의 목표였던 '빠른 릴리즈 & 20대가 가볍게 써볼 수 있는 서비스'라는 지점에서는 충분히 타당하다고 생각했고, 주변 유저 인터뷰를 통해서도 이러한 서비스에 대한 니즈와 호기심이 존재한다는 것을 발견한 후에 더욱 확신을 갖고 프로젝트를 이어나갈 수 있었던 것 같아요. 다만, 모든 아카이빙 서비스가 그렇듯 '약간은 귀찮고 불편한 서비스'일 수도 있다고 생각했어요. 따라서 이를 보완해주기 위해서는 서비스가 시각적으로 매력적이어야 한다고 생각했는데요, 이러한 부담스러운 과제를 저희 팀의 든든한 디자이너와 프론트 친구들이 보란듯이 해결해주었답니다. 

나아가, 레터링의 매력적인 UX 제공이라는 부담스러운 과제를 완벽하게 브랜딩한 디자이너의 목소리도 안 들어볼 수 없다. 중간 합류하였지만, 누구보다 서비스를 '잘' 이해하고자 하는 열정을 바탕으로 레터링의 화면들을 아름답게 완성해준 디자이너에게도 이 자리를 빌려 감사인사를 전한다 ☺️ 그녀의 고충도 만만치 않았을 것 같은데 한 번 들어보자

3️⃣ 디자이너 인터뷰  - 서비스의 아이덴티티를 잘 풀어내는 법

"레터링의 화면, 무엇을 중점적으로 고민하고 어떤 가치를 부여하고자 했는지 궁금해요"

예현 : 크게 보자면, 레터링만의 '우주'라는 컨셉과 편지라는 매체를 함께 잘 녹여내는 게 가장 중요했던 것 같아요. 즉 사용자 입장에서 편하게 서비스를 이용할 수 있게 기능을 구성하는 일뿐만 아니라, '레터링' 서비스만의 매력도를 알아갈 수 있게요.
그러려면 사실 저부터 우리 서비스만의 가치와 아이덴티티를 명료하게 이해하고 있어야 했는데요, 저는 중간에 디자이너로 합류한 케이스라 화면 하나가 나오기까지의 히스토리를 팔로업하고 또 저 나름대로 고민하는 단계가 필요했어요. 이때 무엇보다도 프로덕트 자체에 대한 '애정'을 갖고 있어야만 더 좋은 결과물, 과정이 나온다고 항상 생각했기에 '애정'이라는 가치를 부여하고자 했어요. 사용자가 보기에도 '이 서비스에는 애정이 많이 느껴지는구나.. ' 가 느껴질 수 있게 많이 고민하는 단계를 거쳤답니다. 

📣 앞으로의 계획

이러한 초기의 고민들을 거쳐 레터링의 1차 스프린트가 마무리 되고, 중간 점검을 거쳐 2차 스프린트(지금은 3차까지 진행중) 로 나아가게 되었다 :) 앞으로 지속적으로 각 스프린트별 저희의 회고를 통해 사이드 프로젝트의 발자취를 함께 공유해보겠다 💪🏻

다음은 2차 스프린트 관련 내용 - 릴리즈와 IT 서비스 전시회 그리고 기능 개선에 대한 내용이 주로 담겨지게 될 것 같은데 (더보기) 

끝