들어가면서
(Apple AppStore) https://apps.apple.com/kr/app/up-grow-yourself/id6448998790
(Google Play Store) https://play.google.com/store/apps/details?id=dev.geundung.up
(Web Version) https://up.geundung.dev
최근 진행한 개인 프로젝트에 대해 간략히 소개하는 글을 작성하고자 한다. 결과물은 위 스토어와 웹 주소에서 확인할 수 있으며 모든 결과물은 GitHub 에 모두 공개되어있다 (마지막 글에 링크되어있으니 확인 바란다)
개발자는 기술에 치중될 수 있다는 것을 느끼고 있고, 필자 본인 또한 그렇다. 사실 개발자는 기술을 통해 무언가를 만들어내는 직종이기에 그럴 수 있다고 생각한다. 여러가지 기술에 관심을 가지고 이를 적용해보고 싶다는 야망을 가진다거나, 꾸준히 리서치하고 공부를 이어가는 것들이 이를 반증하는 모습이라고 본다.
하지만 성공적인 서비스를 위해서는 개발자 중심의 기술적인 관점보단 다른 관점으로 생각해야 한다고 본다. 서비스들은 가치를 제공함으로써 사용자를 유치한다. 여기서 이야기 하는 가치는 상당히 중요한데 개발자가 아무리 좋은 기술을 사용했고 새로운 기술을 사용했더라도 대부분의 사용자 입장에서는 본인이 원하는 가치를 충족시켜주는 서비스가 중요하지 기술은 크게 중요하지 않다는 것이다.
필자 본인의 생각은 이와 같지만 기술을 서비스에 적용하고 운영하는 것에 대해 아직 경험이 많이 부족하다. 여전히 기술 중심적으로 사고하는 경향이 있지만, 또 역설적으로 기술적으로도 아직 부족함이 많다고 생각한다. 이러한 상황을 극복하기 위해 우선 조그마한 가치를 제공하는 서비스를 만들어보며 기술적인 성장을 함께 할 수 있는 프로젝트를 진행하고자 계획하게 되었다.
상용 프로덕트에는 직접적으로 활용하거나 적용하기 어려운 기술들이 대부분이다. 이 중 새로운 기술 혹은 라이브러리 및 프레임워크가 대표적인데, 이들이 추구하는 무언가(아키텍쳐나 컨벤션 등)와 이를 적용하기 위해 진행해야 하는 구조 설계 및 리팩토링 등 기존 코드 베이스와의 조합을 반드시 고려해야만 한다. 하지만 이로 인해 발생할 수 있는 여러가지 부수 효과들을 완벽히 파악해야지만 우리가 생각하는 아름다운 조화(이거 봐! 문제 없이 잘 되잖아)를 이루어낼 수 있다.
이번 사이드 프로젝트를 진행하게 된 이유도 이러한 문제점 때문이기도 하다. 상용 프로덕트에서 도전하는 것은 잘못된 결과를 초래할 수 있기에 리스크가 크다. 평소에 궁금했던 것들은 개인만의 프로젝트를 진행함으로써 해소하려고 한다. 즉 철저히 개발자 관점으로 프로젝트를 진행하고자 한다는 것을 미리 이야기 한다. 여러가지 기술들이 많이 나오고 있는 상황 속에서, 필자 본인은 이를 사용해보고 적용해보고 싶다는 광기에 가까운 야망을 가지고 있었기 때문이다.
팀 빌딩
프로젝트를 진행하기에 앞서, 팀을 하나 만들었다. 사실 필자 본인, 즉 1인이 진행하는 프로젝트이기에 팀이 필요할까 싶었지만 예쁜 포장지로 나를 감싸 장기적인 개인 프로젝트를 이끌어내고자 팀이라는 것을 고안하게 되었다.
앞서 필자는 기술들에 대한 야망을 품고 있었다고 이야기 했지만, 개발자로써의 성장에 조금 더 포커스가 맞춰져 있다. 배움은 개인을 성장시키고 도태되지 않도록 우리를 이끌어주는 역할을 한다. 어떤 직업이던간에 배움과의 거리가 멀어지면 멀어질수록 스스로의 미래는 불투명해지고 다른 경쟁자로부터 밀려날 수 밖에 없을 것이라고 생각한다. 이러한 마음가짐을 갖고 꾸준한 배움과 개인의 성장을 이끌어 나가기 위해 팀을 만들게 되었다고 볼 수 있다.
팀을 만들면서 슬로건도 하나 만들었다.
성장의, 성장에 의한, 성장을 위한
게티즈버그 연설로 알려진 것으로 유명한 문장으로 만들어보았다. 팀을 만들게 된 목적 자체가 필자 본인의 성장에 목적을 두고 있으므로 짧고 간결하게 팀을 소개하기 좋은 문장이라고 생각한다.
이렇게 짧은 시간에 팀 빌딩이 마무리 되었고 나는 깃허브에 팀 조직을 만들게 되었다.
기획
개인의 성장을 위해 사이드 프로젝트를 시작하게 되었고, 개인의 성장을 위해 1인 팀을 만들기도 했다. 그렇다면 남은 건 무엇일까? 그렇다. 기획한 프로젝트 주제도 개인의 성장에 포커스를 맞춘 서비스이다.
이전에도 여러번 사이드 프로젝트를 진행했지만 막연한 생각만으로 꽤나 큰 서비스를 기획했던 적이 몇 번 있었다. 막상 진행하다보면 계획보다 스케일이 더 컸을 뿐만 아니라 기술적으로 부딛히는 문제들이 많았기에 잘 마무리 했던 적이 없었던 것 같다. 어렵고 부딛히는 것이 많을수록 얻을 수 있는 지식과 경험이 늘어나겠지만, 이를 빠르게 해결하지 못한다면 점차 의욕이 감소함과 동시에 능률이 떨어지고 프로젝트에 대한 애정이 식을 수도 있다는 것도 느껴보았기에 최대한 짧고 굵게 끝낼 수 있는 프로젝트를 고안하게 되었다.
프로젝트 목표
이러한 마음 가짐으로 시작한 프로젝트의 목표는 아래와 같다.
- 개인의 성장(목표 달성)을 위해 도움을 주어야 한다.
- 개인의 성장(목표 달성)을 위해 수행한 것들에 대한 기록 및 관리 기능을 제공한다.
- 개인이 어느정도 노력했는지 가시화하여 제공한다.
- 평소에 관심이 있었거나 사용해보고 싶었던 기술을 접목해본다.
- 프로덕션 배포 후에는 모두 오픈소스로 공개한다.
마지막 두 목표는 사실 제품 관점보다는 개발자 관점에 더 가깝다. 서비스를 사용하는 사용자 입장과는 거리가 먼 목표이지만, 일단 개인의 성장 즉 필자 본인의 관점에 가까운 목표였기에 추가하게 되었다.
간략히 생각했던 내용은 개인의 성장을 위해 목표 달성을 돕고, 수행하는 결과에 대해 가시화 하여 제공하면서 여러 사람들과 공유할 수 있는 서비스를 만드는 것이다. 쉽게 이야기 하면 개인의 할 일을 등록하고 꾸준히 수행하며 경험치를 얻고 개인의 레벨을 올리는 서비스이다.
이러한 서비스를 기획한 이유는 게임의 경우 본인의 계정 그리고 캐릭터를 레벨업 하는데 있어 상단한 노력과 시간을 투자하는데, 정작 본인 스스로에게는 그만큼의 노력과 시간을 투자하는 것이 쉽지 않다는 것은 모두가 잘 알고 있을 것이다. 물론 필자 본인도 이에 포함되는데, 꾸준한 습관을 기르며 본인 스스로에게 좋은 영항을 줄 수 있도록 돕는 서비스를 만들고자 이러한 아이디어를 생각하게 되었다.
개발 관점의 목표
기본적인 서비스의 기능은 앞서 이야기 했던 내용 정도로 정리했다. 드디어 필자 본인의 쌓아왔던 야망을 뽐낼 기회가 찾아왔다. 길게 이야기 하지 않고 아래 기능들을 구현하는 것으로 정리해보았다.
- React Native 기반 애플리케이션으로 개발 (하나의 코드 베이스로 Android 및 iOS 그리고 Web 까지 커버)
- React Native 의 New Architecture(Fabric) 기반으로 개발
- Web의 경우 PWA를 지원하도록 하여 앱과 유사한 사용자 경험을 제공할 수 있도록 개발
- 인터랙티브한 애니메이션 적용해보기
- Storybook 적용 (Native 및 Web)
사실 별거 없다고 볼 수 있지만, 실제 운영중인 프로덕트에선 적용하기 어려운 것들이 몇 개 있다. 애초에 Android, iOS 기반의 React Native 기반 애플리케이션 자체로도 고려해야할 것들이 많은데 웹까지 커버하기란 쉽지 않다고 본다. React Native 를 통해 Android 그리고 iOS 를 지원하는 사례는 많으나, 웹까지 커버하는 서비스는 찾기 어려운것도 사실이다.
과거 직장 동료로부터 알게된 개발자가 한 명 있는데, React Native 생태계에 상당한 기여를 하고 있으면서 Android, iOS 뿐만 아니라 웹(Web)과의 경계를 React Native 를 통해 허물기 위해 노력하고 있는 모습을 보며 상당한 동기를 부여받았다. React Native 컨퍼런스인 App.js conf을 보면 알겠지만 필자 본인에게 큰 영감을 준 인물이라고 자신있게 소개하고 싶다. 최근에는 Next.js 를 React Native 에서 사용할 수 있는 Solito 를 릴리즈 하기도 했고, 실제로 이를 활용한 상용 서비스를 만들어 여러 사용자에게 가치를 제공하고 있기도 하다.
여기에 힘입어 필자 본인도 하나의 코드베이스로 Android, iOS 그리고 웹(Web) 모두 지원하는 서비스를 만들어보기로 했다.
시장 분석
시작하기에 앞서 프로젝트에 대해 간략히 정리해보는 시간을 갖고자 SWOT 분석을 진행했다. 고등학교 1학년 상업경제 시간에 SWOT 분석을 처음 접했던 기억이 있는데 개인 프로젝트 덕에 처음 활용해볼 수 있게 되었다. 위 목표를 기준으로 한 SWOT 분석이며 간략히 정리했던 내용은 아래와 같다.
서비스의 경우 가치를 제공해야 하고 가치에 따라 수익이 발생할 수 있다고 생각한다. 이번 첫 프로젝트는 수익은 일절 생각하지 않고, 필자 본인의 성장 그리고 조그마한 가치일지라도 여러 사용자에게 제공하는 것에 초점을 맞추었기에 간략히 정리를 진행해보았다. 이후에는 아래와 같이 조금 더 구체적인 기능을 리스트업 해보았다.
- 개인의 할 일 등 목표 등록 및 수행 관리
- 개인의 수행에 따른 보상 지급 (경험치 및 뱃지)
- 회원 가입을 통한 데이터 보존 및 관리
- 개인의 프로필 관리 (레벨 등)
- 개인의 프로필 공유
- 매일 주기적인 리마인드 알림 제공
- 유저간 친구 등록/해제 & 메신저 기능을 통한 커뮤니케이션
- 누구나 사용할 수 있는 100% 무료 서비스
아이디어 스케치
이어서 실제 서비스의 모습을 간략히 스케치 해보았다. 기능들이 어떤 모습으로 제공되면 좋을지, 배치는 어떻게 할지, 화면 구성은 어떻게 할지 등 한 번 정리할 수 있는 계기가 되었다. 보유하고 있던 아이패드로 간략히 스케치를 진행했는데, 구매한지 지 4년이 다 되어가는 시점에 드디어 활용해보게 된 계기가 되었다.
어느정도 스케치를 진행해보고, 손으로 그렸던 결과물은 개인 피그마 프로젝트로 옮겨 정리했다.
기획 검토
기능을 모두 정리하고 간랸한 스케치로 정리했지만, 실제 기능으로 구현하자니 생각보다 스케일이 컸다고 판단되었다. 머리로 생각했을 때에는 아주 간단한 할 일 기능에 친구 추가 및 공유 그리고 커뮤니케이션 기능 뿐이었지만 이를 기술로 승화시켜 구현하자니 꽤나 고려할 부분이 많았다.
현업 그리고 학업을 진행하는 상황 속에서 생각보다 커진 프로젝트를 진행하기에는 꽤 많은 시간이 필요할 것 같다는 생각이 들어 약간이라고 쓰고 꽤 많은 의 기능을 축소하게 되었다.
기획한 서비스의 본질에 대해 다시 고민해보고 최종적으로 아래와 같은 기능만을 제공하도록 계획을 변경했다.
- 개인의 할 일 등 목표 등록 및 수행 관리
- 개인의 수행에 따른 보상 지급 (경험치 및 뱃지)
- 개인의 프로필 관리 (레벨 등)
- 개인의 프로필 공유
- 매일 주기적인 리마인드 알림 제공
- 누구나 사용할 수 있는 100% 무료 서비스
회원 가입을 통한 데이터 보존 및 관리유저간 친구 등록/해제 & 메신저 기능을 통한 커뮤니케이션
큰 기능이 사라졌지만 본질은 잃지 않도록 했다. 사용자의 성장을 도우며 누구나 사용할 수 있는 서비스임은 여전하다고 생각된다.
첫 번째로 데이터 관리의 경우 Google Firebase 등의 서비스를 활용하고자 했으나 데이터 관리(개인정보 등)에 대한 이슈가 생길 수도 있고, 비용 문제도 있었기에 로컬에 저장하여 사용할 수 있도록 변경했다. 로컬에 저장하는 경우 사용자가 기기를 변경하는 경우 데이터를 보존할 수 없는 문제가 발생하기에 백업 및 복원 기능을 제공하여 혹여나 사용자가 기기를 변경하더라도 기존 데이터를 복원하여 서비스를 이용할 수 있도록 제공하는 방향으로 변경했다.
두 번째는 커뮤니케이션 기능의 축소이다. 자기계발을 스스로 잘 하고 있는 분들은 많기도 하고, 주요 SNS를 보면 각자 진행한 내용들에 대해 간략히 정리해서 업로드하고, 다른 이용자들과 공유하며 소통하는 사례를 많이 볼 수 있다. 커뮤니케이션은 주요 기능 중 하나이기에 필수라고 생각했지만, 이미 글로벌하게 서비스 되고 있는 그리고 잘 만들어진 SNS 서비스가 존재하는 상황에서 유사한 기능을 제공하는 것이 과연 기능 구현에 들어가는 기술적, 시간적, 비용적인 측면에서 도움이 되는 것일까? 라는 의문점을 갖게 되었다. 기존 SNS 등의 플랫폼을 활용하여 사용자가 자유롭게 원하는 곳에 공유할 수 있는 기능을 제공하도록 기획을 변경했다.
그 외에도 커뮤니케이션 기능의 경우 가장 보편적이면서 필수적인 기능이지만 서비스 구현 그리고 운영 관점에서는 상단한 관리가 필요한 부분이라고 느꼈다. 왜냐하면 사용자들이 생성하는 컨텐츠에 대한 정책 관리 그리고 혹시 모를 불건전한 컨텐츠의 검열, 컨텐츠 데이터 및 개인정보 관리 등 상당한 노력과 비용이 필요하다는 것이다. 이러한 리스크를 회피하고자 이러한 노선을 선택하게 되었다.
시작하기에 앞서
사이드 프로젝트에 대한 모든 작업(Task)는 GitHub의 Project Board 를 활용하기로 했다. 과거에는 Trello 등의 칸반 보드 서비스를 종종 활용했는데, 이젠 GitHub 자체적으로 기능을 제공하기에 선정했다. (이슈 생성 그리고 PR 연결까지 개발 진행하는데 있어 아주 적합하다고 생각한다)
개발 뿐만 아니라 디자인, 문서 정리 등 모든것을 작업으로 기록해두어 진행 상태를 관리했다.
디자인
1인 팀이다 보니 당연히 디자이너는 없다. 개발만 할 줄 아는 본인이 직접 스케치한 내용을 기반으로 디자인을 진행했다. 이때 여러가지 자료를 참고했는데, 주로 Pinterest 를 참고하여 UI를 구성하게 되었다.
과거 웹 개발을 처음 접했을 때 Bootstrap를 통해 UI 를 쉽게 구성했던 기억이 있는데, 이때 느낀 점은 모두 비슷한 디자인의 웹 페이지가 만들어졌다는 것이다. 이번에는 조금 차별화된 디자인의 UI를 제공하고 싶었기에 이번 프로젝트의 주요 디자인 포인트를 아래와 같이 정해보았다.
카툰 스타일 그리고 입체적인 UI
디자인 토큰 정의
해당 원칙을 디자인에 녹일 수 있도록 두꺼운 테두리, 둥글둥글한 모서리, 그리고 짙은 그림자를 추가하여 UI 를 구성하게 되었다. 본격적인 작업에 앞서 디자인에서 사용할 색상과 폰트 크기, 여백 크기 등을 정했다.
이렇게 탄생한 규칙들은 디자인 토큰으로 다시 정의했고 이를 기반으로 디자인과 개발에 활용하게 되었다. (디자인 토큰의 경우 아래와 같이 코드에 정의되어있다.)
컴포넌트 분리
UI를 작업하다보니 반복적으로 사용하는 구성요소들이 꽤 많았는데, 예를 들어 버튼같은 요소가 이에 해당된다. 이들을 별도 컴포넌트로 나누어 서비스에 활용되는 구성요소로 분리했고 이를 Up 의 디자인 시스템(Design System)으로 정의하여 반복적인 작업을 줄이고 생산성을 높일 수 있도록 했다.
초기에는 Atomic Design 기준으로 컴포넌트를 분리해보려고 했지만, 요소간의 계층, 기준을 제대로 확립하지 못해 오히려 더 복잡해지는 느낌을 받았기에, 분리하지 않고 하나의 계층에 모두 포함시키는 방향으로 변경했다.
아래 스크린샷은 Figma 내에서 디자인한 요소와 이를 컴포넌트로 만들어둔 모습을 보여주고 있다. 스크린샷 좌측을 보면 몇 가지 요소들이 에셋으로 들어가 있는데 이들이 컴포넌트이다.
화면 구성
이렇게 만들어진 컴포넌트들을 가져다가 블록을 조립하듯이 화면을 구성해나갔다. 작업은 Figma 의 컴포넌트 그리고 Auto Layout 을 활용하여 화면을 구성했고, 개발할 때에는 Flex 레이아웃을 사용했기에 비교적 쉽게 코드로 옮길 수 있었다. 물론 디자인을 코드로 바로 변환 가능한 플러그인도 많았지만, 이 부분까지 활용해보진 못했다.
화면 구성 샘플은 아래와 같다. 기본적인 디자인 시스템 컴포넌트를 만들때에는 시간이 꽤 걸렸지만 한 번 만들어두니 화면 구성은 아주 빠르게 진행할 수 있었다.
아이콘 및 이미지 제작
UI 와이어프레임 뿐만 아니라 서비스 내에서 제공해야하는 미디어(뱃지 이미지 등..)의 경우에도 직접 그리거나 벡터로 아이콘을 만들어서 사용했다. 처음에는 좌측과 같이 아이패드에서 직접 손으로 그린 이미지를 사용했으나, 디자인적으로 화면 UI 와 잘 맞지 않는다고 생각하여 다시 작업을 진행했다. 우측 결과는 Figma 에서 벡터 도형을 활용하여 재탄생된 아이콘들이다.
이번 게시글을 통해 기획부터 디자인까지의 내용을 간략히 소개했다. 개발에 대한 이야기는 다음 글에 이어서 진행하도록 하겠다.