Download on app store

PROJECT OVERVIEW

CLIENT
(비공개)
DATE
2023-02-02
TYPE
WEB / APP
STACK
Nest.js
Next.js
Node.js
Mysql
Redis
Tailwind CSS
Typescript
아마존 웹 서비스
애플 앱스토어
구글 플레이스토어
피그마

(클라이언트님의 요청에 따라 앱 정보는 공개해 드릴 수 없는 점 양해 부탁드리겠습니다.)

음악인을 위한 정보 공유 사이트

안녕하세요.

이번에 소개해드릴 프로젝트는 정보 공유 사이트이자, 커뮤니티입니다. 가수, 악기 연주자, 지망생 등을 위한 공모전을 모두 모아 게시하여 알리는 것이 중요 목표입니다. 더불어 커뮤니티 기능까지 추가하여 같은 분야의 사람들이 소통할 수 있는 공간으로 만들었습니다.

또한 뮤지션들을 위한 유용한 정보도 게시하고, 공모전이나 밴드 등의 팀원을 모집하기도 합니다. 본 프로젝트에서는 주요 고객을 음악인으로 타게팅하여 응집력 높은 소속감을 느끼게 유도하고, 팀원 모집의 편리함을 달성케 합니다.

모바일 - PC 간의 완전한 반응형 레이아웃

모바일 환경과 PC 화면에 적절한 화면은 각자 다릅니다. 모바일은 스크롤과 네비게이션 메뉴에 의존하여 작은 화면 내에 모든 정보를 담아냅니다. 그에 반해 PC는 넓은 모니터 화면을 사용하기에 영역을 적절히 분리하여 각 요소를 배치합니다.

모바일과, PC 화면을 모두 제작하여야 하기 때문에 반응형 화면으로 개발하게 되는 일이 많습니다. 반응형 화면이란 화면 크기에 맞춰서 레이아웃의 배치가 바뀌는 것인데요. 그래서 모바일과 PC 화면이 단순하게 기획, 디자인 되는 경우가 많습니다.

본 프로젝트에서는 각 플랫폼(PC, 모바일) 사용자에게 최적의 경험을 주고자 PC 화면과 모바일 화면을 완전히 따로 개발하였습니다. 그럼에도 반응형과 흡사하게 작동 하는데요, 작업량은 많지만 잘 개발하기만 하면 결과물은 미려하게 만들 수 있습니다. 특히 모바일 유저에게는 앱을 사용하는 것과 같은 경험을 줄 수 있습니다.

안드로이드, IOS 앱 출시

이번 프로젝트는 웹사이트, 안드로이드, IOS 3가지 플랫폼으로 출시 됩니다. 한 번에 3가지 플랫폼을 제작해야 하기 때문에 기간이나 비용 면에서 무리가 있지 않을까 하시는 분들이 많습니다.

디프랙은 보통 두가지 방식을 제안 드리는데요,

첫째로, React로 사이트를 개발하고, 안드로이드, IOS로 패키징 하여 접속 할 수 있게 구현하는 방식으로 동시에 3가지 플랫폼을 개발할 수 있고 비교적 비용이 저렴합니다.

둘째로, React Native로 안드로이드, IOS를 개발하고 사이트는 필요에 따라 개발하는 방식이 있습니다. React Native로 개발 하게 되면 위에서 말한 방식보다 성능이나 앱 특화 기능 구현에 유리합니다. 다만 공수가 좀 더 들어갈 수 있고 사이트는 따로 개발하여야 하기 때문에 비용이 더 들어갈 수 있습니다.

저희는 이번 프로젝트에서 첫번째 방식으로 3가지 플랫폼을 동시에 개발하여 출시 하였습니다. 고객님께서 보다 저렴한 비용과 유저 접근성이 유리하다는 점에서 선택 하신 것 같습니다. 이 방식을 사용하여도 푸시 알림, 갤러리 접근, 카카오 로그인 등의 기능이 구현 가능하니 최근에는 많은 고객님들이 이 방식을 선호하시는 것 같습니다.

마치며

커뮤니티는 유저들이 얼마나 자주 접속하느냐, 참여하느냐에 따라서 성공을 가르는데요, 유저 참여를 극대화 시키는 다양한 기능은 모두 활용할 수 있어야 할 것으로 보입니다. 그리고 유저의 행동을 데이터화 하면 사이트나 앱 개선에 큰 도움이 됩니다.

프로젝트를 진행하다 보니 알게 되었는데, 우리나라에 입문 뮤지션들이 많이 계신 것 같습니다. 그 분들을 위한 공모전이나 대회가 많이 열리고 있네요. 뮤지션들에게 도움이 되는 정보를 공유하고, 뮤지션들을 응집력있게 모아주는 커뮤니티로는 최초인 것 같습니다. 운영을 잘 하셔서 성공 하시길 바랍니다!!