안녕하세요 저희는 it동아리 디프만 14기에서 모바일 웹서비스 ‘praise up’을 런칭한 이각세 팀입니다. 서비스 런칭 이후 디스콰이엇에서 홍보를 진행했는데, 많은 분들의 관심을 받아 트렌딩 1위까지 오르게 되었어요! 👏🏻
지금부터 이각세 팀의 praise up 서비스를 기획한 여정 A부터 Z까지를 말씀드릴게요.

🔮 praise up은 어떤 서비스 인가요?

제목에서 유추할 수 있듯이, praise up은 서로에게 칭찬을 부담 없이 주고받을 수 있는 서비스에요!
유저는 날마다 제공되는 다른 키워드에 따라 오늘의 칭찬 받을 순간을 작성하고 작성한 게시글을 지인들과 공유해서 칭찬 메시지를 받아볼 수 있어요.

이때 서비스를 이용하는 과정에서 칭찬 구슬을 이용한 다양한 인터랙션을 접하고, 재치 있는 이미지를 함께 활용해 칭찬을 남길 수 있다는 점이 저희 서비스만의 큰 특징이에요.

🔮 praise up을 만들게 된 계기는 어떻게 되나요?

praise up은 인스타그램과 같은 기존 SNS에서 느끼는 피로감을 해소하려는 목적에서 시작된 서비스에요.
‘무조건 칭찬만 하는 구조로 SNS를 통한 긍정적인 경험을 제안하자!’ 라는 아이디어에서 출발했으며, 아래의 유저 리서치와 데스크 리서치를 기반으로 방향성을 확고하게 다져나갔어요.

💡 SNS를 이용하며 피로감을 느끼고 있었던 많은 사람들
87명이 응답한 설문 결과, 70%가 넘는 사람들이 기존 SNS 경험에서 피로감을 느끼고 있었어요.
특히 상대방의 콘텐츠를 보고 느끼는 상대적 박탈감과, 부정적인 콘텐츠로부터 느끼는 피로감이 가장 큰 비중을 차지했어요. 🥲

💡 칭찬, 격려 등의 긍정적인 메시지 활용에 대한 가능성 발견
SNS의 피로감을 어떻게 해소할 수 있을지 고민하며 데스크 리서치도 진행했어요.
마침 미국에서 긍정적인 메시지로 서로의 자존감을 북돋아 주는 서비스 ‘gas’가 SNS에서 피로감을 느꼈던 유저들에게 큰 인기였다는 사실을 발견했어요. 또한 SNS에서 긍정적인 콘텐츠를 읽은 사람들의 경우 우울감이 낮아진다는 논문의 내용을 근거로 하여, SNS에서 느끼는 피로감을 긍정적인 메시지로 해소할 수 있는 것에 대한 가능성을 발견했습니다.

💡 그러나, 긍정적인 메시지인 칭찬을 전달하는 것에 대한 부담이 존재
하지만, 생각보다 많은 사람들이 칭찬을 전달하는 것에 대한 부담을 느끼고 있었어요. 설문조사에 따르면 ‘직접 칭찬을 건네는 것이 쑥스러워서' 의 이유가 가장 많은 응답을 차지했어요.

위의 리서치 내용을 종합하여 저희 팀이 정한 방향성은 아래와 같았어요.
➡️ 이미지를 이용해 익명으로 칭찬을 부담없이 주고 받을 수 있게 하여 서로에게 긍정적인 영향을 줄 수 있으면 어떨까?

이런 기획의 과정을 거쳐 ‘이미지로 소통하는 칭찬 SNS, praise up’이 탄생했어요. 🥳

🔮 디자인팀에게 주어진 챌린지...!를 이렇게 해결해봤어요

더 좋은 서비스를 위한 고민 : 피로감을 어떻게 풀어내야 할까?🤔
기존 SNS에서의 피로감을 풀어내고자 하는 것이 서비스의 목적이었지만, ‘칭찬'이라는 요소만으로는 2% 부족하다는 생각이 들었어요. 사용자들이 서비스를 이용하며 칭찬 말고도 우리의 서비스를 이용하고 싶은 이유를 더하고 싶었는데, 그건 바로 ‘재미’의 요소였습니다. 작은 핸드폰 화면 내에서 '어떻게 하면 효과적으로 사용자의 피로감을 해소할 수 있을까?' 고민했고 두 가지의 방법을 모색했답니다.

☝🏻 일반적이지 않은 인터랙션을 이용해 서비스를 사용하는 동안 재미를 느낄 수 있게 하자 ✨
일상적으로 많이 사용하는 앱 서비스들에선 서비스의 플로우가 자연스러워 보이도록 하는 인터랙션들을 많이 사용하고 있었어요. 자연스러운 인터랙션에 익숙해져 있을 때, 위치를 기반으로 하는 ‘Z' 서비스를 사용했는데요, 화려한 인터랙션으로 첫 사용부터 너무 재미있게 썼던 기억이 있었어요!
이 기억을 기반으로 praise up에서도 특별한 인터랙션으로 사용자들의 관심을 끌어보자는 목표를 세웠답니다.

🤞🏻 칭찬을 시각적으로 예쁘게 보일 수 있는 모티프를 이용하자 ✨
칭찬, 듣기만 해도 기분이 좋아지죠!
하지만 저희의 서비스에선 칭찬을 말로 들을 수 없답니다. 🥲 지인들이 남긴 칭찬을 두 눈으로 보고 읽어야 해요!
지인들이 남겨준 소중한 칭찬, 보기만 해도 기분이 좋아지겠죠? 이에 더해 칭찬이 시각적으로도 예쁘게 생기면 더 기분이 좋아지겠죠?
그래서 저희는 칭찬을 예쁜 구슬에 담기로 결정했답니다!✨ 듣기에도 좋은 칭찬, 보기에도 좋게 말이죠!

더 좋은 협업을 위한 고민 : 화면을 어떻게 개발자들에게 전달해야 효율적으로 서비스를 만들 수 있을까?
화면설계서.... 너무 쓰기 싫었어요. 😇
화면 설계서는 숫자 알파벳 등 이런저런 기호들을 넣어가면서 문서화하는 과정에서 많은 품이 들지만
화면 flow를 직관적으로 살펴볼 수 없다는 지점이 큰 단점으로 느껴졌어요. 기획 과정에도 함께 참여한 개발자들이 서비스에 대한 이해도가 높아야 QA과정을 단축하고 완성도가 높은 서비스를 빠르게 완성할 수 있을텐데 기능들의 flow를 살피기 어렵다는건 효율성이 떨어지는 방식이라고 생각했어요.

이를 해결하기 위해서 단순하게 접근했는데요, 피그마를 이용했답니다!

화면 설계서에 작성해야 하는 내용들을 피그마에 똑같이 넣는 대신, 타이틀바를 이용해 기능별 flow에 해당하는 화면들을 순차적으로 묶어 개발자들도 flow를 한눈에 확인하기 쉽도록 제작했어요.

스크린샷 2024-02-25 오후 11.20 1.png 어때요, 꽤나 보기 좋게 정리되지 않았나요?😊

🔮 개발팀에게 주어진 챌린지...!를 이렇게 해결해봤어요

🚀 서버 파트에서는 ‘헥사고날' 아키텍쳐를 도입했어요

서버 파트에서는 서비스에 맞는 ‘아키텍처' 에 대해 많이 고민했어요. 기존에 많이 사용하는 ‘모놀로식' 아키텍처에서 벗어나 ‘멀티 모듈’을 적용할지, 한 번도 사용해 보지 못했던 ‘헥사고날’ 아키텍처를 적용할지 많이 고민하고 개발을 시작했습니다. 고민하는 과정에서 멀티 모듈로 가져가기에는 저희 서비스의 도메인이 너무 간단하고, 각 모듈이 담당할 기능의 크기가 작다고 판단했어요.

따라서 헥사고날 아키텍처를 공부하며 도입하는 것을 저희의 도전 과제로 삼았습니다.

image 117.png 헥사고날 아키텍처를 적용하며 저희는 각각의 장단점을 도출할 수 있었어요.
먼저 헥사고날 아키텍처는 핵심적인 비즈니스 로직과, 외부 로직이 분리되어 있어 코드의 가독성이 올라갔습니다. 또한 테스트도 정말 편리했어요. 하지만 결합도를 낮추기 위한 port, adapter와 같은 파일들이 많아져 패키지 depth가 깊어지기 때문에 구조 파악이 힘들다는 단점이 있었습니다.

추후에 서버 파트는 이 헥사고날 아키텍처를 유지하며, 서비스의 여러 확장성을 고려해 멀티 모듈로 전환할 계획이에요.

🚀 웹 파트에서는 다양한 인터랙션을 구현했어요.

저희 praise up 서비스에는 정말 많은 인터랙션이 포함되어 있어요. 따라서 웹 파트에서는 저희의 서비스 최고 매력 요소인 ‘인터랙션' 구현을 도전 과제로 삼았습니다.

짧은 시간 내에 많은 인터랙션 요소를 효율적으로 구현하기 위해 디자인을 기반으로 SwiperJS, MatterJS, Framer 라이브러리를 도입했습니다. 하지만 저희의 인터랙션은 단순히 라이브러리의 내장 기능만으로는 구현할 수 없는 부분들이 몇 가지 있었어요.

저희 서비스의 대표적인 두 화면과 각각의 구현 과정을 소개할게요.

☝🏻 칭찬 키워드 선택 화면

게시글을 작성하기 전, 오늘의 칭찬 키워드를 선택하는 화면이에요.

키워드 가로 슬라이드 영역은 SwiperJS 라이브러리를 사용하여 손쉽게 구현할 수 있었어요.

가로 슬라이드 모션과 동시에 구슬과 백그라운드가 돌아가야 하기 때문에 SwiperJS의 회전 상태 값에 따라 구슬과 백그라운드의 rotate 값을 변경하면서 해당 인터랙션을 구현할 수 있었어요.

스크린샷 2024-02-26 오전 12.56 1.png 가로로 슬라이드를 하면서 세로로 올리는 영역의 경우에는 어떻게 구현했을까요? 사용자의 모션에 따라 구슬과 텍스트가 동시에 올라와야하기 때문에 Framer와 SwiperJS를 적절히 커스텀하여 구현했어요. Framer의 세부 속성값을 이용하여 구슬이 사용자 터치에 반응해 Y축으로만 움직일 수 있도록 조정했습니다.

구슬 키워드의 경우, 구슬을 Y축으로 드래그 시에 키워드가 따라가도록 framer의 useAnimiation을 이용한 구슬의 위칫값 추적 이벤트 구현으로 키워드가 같이 자연스레 올라갈 수 있는 인터랙션을 구현할 수 있었어요.

🤞🏻 받은 칭찬 메시지 확인하는 화면

아래 화면은 받은 칭찬 메세지를 확인할 수 있는 아카이브 화면이에요.

먼저 해당 화면은 Javascript 2D obejct 라이브러리 MatterJS를 기반으로 만들어졌어요. 받은 칭찬 메세지의 개수에 따라 여러 텍스처를 가진 구슬들이 떨어지는 기능은 쉽게 구현할 수 있었습니다.
다만 저희 서비스의 화면에는 2d object에 칭찬 메세지를 보낸 친구의 닉네임이 랜더링 되어야 하는 요구사항이 있었어요. 🤔 이 부분은 MatterJS 라이브러리에서 지원하지 않는 기능으로 저희는 라이브러리 내부 코드를 일부 수정하게 되었습니다.

MatterJS에 그려지는 Body object 코드를 분석한 뒤 object가 그려지는 코드를 가져와, canvas object가 그려지는 위치에 텍스트를 함께 그려주는 기능을 추가했어요. 또한 글씨체, 색상, 크기는 외부에서 주입받아 사용할 수 있도록 작성했기 때문에, 라이브러리에 옵션을 넣어주듯이 쉽게 사용할 수 있었습니다.

스크린샷 2024-02-26 오전 12.53 1.png 또한 MatterJS에는 내장 Event Listener가 존재해요. 저희 서비스는 사용자의 스크롤, 클릭, 터치에 다양한 기능이 추가로 적용되어야 했기 때문에 default event를 삭제하고 전부 새 event를 달아주었습니다.

스크린샷 2024-02-26 오전 12.52 1.png 마지막으로 화면에서 저희 최강 디자이너분들이 열심히 만들어주신 구슬의 텍스처와 유저의 닉네임이 선명하게 보여야 하기 때문에 텍스처의 화질 조정 및 devicePixelRatio를 적용하여 조금 더 서비스의 완성도를 높일 수 있었어요. 위와 같은 많은 고민 과정 끝에 아카이브 화면의 개발을 성공적으로 마칠 수 있었습니다! 🚀