앱개발로 돈 벌기 4편 - 개발 생산성을 위한 라이브러리 제작

앱으로 돈벌기 시리즈를 업로드 한 지 어느새 4개월이 지났다.
일단 갑자기 드럽게 바빠져서 개인적인 활동을 못 해진 것도 한 몫했다.

변명은 집어치우고 자 그동안 어떤 일이 있었을까?

일단 첫 번째로 출시한 Gradify라는 앱은 아래 이메일과 같이 정지를 당했다. 왜지?
'인앱 환경 ""' 이라는 이상한 문구만 남긴채 이유도 명확하게 알려주지 않았다...ㅠㅠ

두 번째 앱인 잔소리 알리미 앱은 이미 내 머리속에서 사라진지 오래다.
아이디어란 게 처음에는 번쩍였다가 나중에 되면 '도대체 이런 쓸모없는 생각은 누가 한거지?'하는 것 같다.

음..ㅋㅋㅋ 그러면 도대체 이 기간 동안 뭘 했을까.
일단 교내(난 고등학생이다)에서 하는 프로젝트 몇 개 돌리고 동아리에서 만드는 앱을 개발했다. 그냥 일을 한 것이다.
이런 프로젝트는 나에게 도움은 됐어도 내 기준에서 그닥 유의미한 결과를 얻지 못한 것 같다. 나는 더 빠르게 돈을 얻고 성장을 하고 싶다.

라이브러리 만들기

그래도 개인적으로 개발에 도움 되는 일을 한 것은 바로 라이브러리를 만든 것이다.
프로젝트를 하면서 나중에 도움될 것 같은 기능이나 중복되는 코드. 재사용 가능한 보일러플레이트를 미리 만들어 놓은 것이다.

첫 번째 라이브러리는 iOS 앱 개발에 사용하는 디자인 시스템, 네트워크, 유틸 등을 모아놓은 것이다. 이름은 MyIOSKit이라고 지었다. 나는 위의 저런 프로젝트에서 iOS 개발과 디자인을 주로 역할로 하기 때문에 iOS 용 라이브러리가 자연스럽게 만들어질 수 있었다. 디자인 시스템부터 봐보자.

GitHub - hhhello0507/my-ios-kit: Create UI components and leverage extensions everywhere, super fast.

 

폰트, 색상, 아이콘, 그림자, 레이아웃, 아바타, 앱바, 버튼, 구분자, 팝업, 프로그레스바, 피커, 텍스트필드 등등.... 그냥 라이브러리를 import하기만 하면 코드에서 바로 저 UI들을 사용할 수 있다. API디자인을 확장성 있게 구현했기 때문에 상황에 따라 UI의 스타일을 유동적으로 변경할 수 있게 했다. 특히 컬러의 경우 메인 컬러를 바꿀 수 있게 하여 서비스에 따라 컬러에 따른 제약을 없앴다.

크게 Foundation, Component, Layout으로 나뉘어져 있다.
Foundation은 다른 UI에서 모두 사용할 공통된 부분이자 핵심부이다. 폰트, 색상, 아이콘, 그림자를 포함한다.

폰트는 아래 그림을 보면 알 수 있듯 우선 폰트 크기에 따라 분류를 한 뒤 분류된 것들은 Bold, Medium, Regular로 Weight에 따라 또 다시 분류했다. 폰트의 크기는 2배수를 사용했고 폰트의 height는 전부 130%를 사용했다. 12px부터 36px까지 폰트를 굉장히 세세하게 나눈걸 볼 수 있는데 전부 확장성 때문이다. 언제 어떤 폰트를 사용할지 모르니 말이다.

컬러는 팔레트와 시멘틱 두 부분으로 나뉜다. 팔레트는 말그대로 팔레트이다. 각 채도에 맞게 다양한 명도로 나타내져 있다. 시멘틱은 Line, Label, Background등의 네이밍을 써 개발할 때 좀 더 편하게 한다. 그리고 시멘틱은 기본적으로 다크모드 또한 지원한다.
이러한 컬러 구조에는 규칙이 있다. 시멘틱이 팔레트를 갖다 쓴다. UI나 컴포넌트는 다시 이 시멘틱 컬러를 갖다 쓴다 (팔레트 <- 시멘틱 <- UI/컴포넌트). 모든 UI나 컴포넌트는 팔레트를 직접 사용하는 것을 지양해야 한다.
이런 구조를 채택한 이유는 무엇일까? 일단 라이트모드, 다크모드 등 테마를 지원하기 쉽다. 또, 개발할 때 시멘틱만 보고 직관적으로 컬러를 파악할 수 있다. 'Label은 아이콘이나 텍스트에 Fill은 그것을 포함하는 컨테이너에 Line은 stroke이나 구분자에'와 같이 말이다. 또, 변경사항이 생기면 팔레트는 그냥 가만히 냅두고 시멘틱만 수정하면 된다.

왼: 폰트, 우: 컬러

 

아이콘은 지금까지 써 온 아이콘을 다 모아놨다. 디자이너가 아니라서 엄청 세밀한 부분까지 조정하진 못했지만 최대한 아이콘 스타일의 일관성을 지키기 위해 노력했다. 새로 아이콘이 필요할 때마다 유동적으로 계속 추가하고 있다.

그림자는 가장 자주 쓸 것 같은 그림자 3개만 만들어놨다. 나는 ev-black-1, ev-black-2를 가장 많이 쓴다.
그림자 종류도 좀 많이 추가해야 겠다. 너무 확장성이 떨어진다. 이렇게 앱을 만들면 그림자 스타일이 전부 뻔할 것 같다..

왼: 아이콘, 우: 그림자

 

다음은 컴포넌트이다. 아바타, 앱바, 버튼, 구분자, 팝업, 프로그레스바, 피커, 텍스트필드 등을 포함하고 있다.
아까 전에도 말했듯 컴포넌트는 시멘틱 컬러를 사용한다. 그렇기 때문에 다크모드도 지원한다.
컴포넌트 설계 시 고려해야할 게 확장성을 위한 파라미터의 양이다.
파라미터는 쉽게 말해서 커스텀을 하기 위한 속성값이라 보면 되는데 이 양이 많아지면 확장성은 늘어나지만 그만큼 복잡성도 증가한다.
나는 나혼자 개발하고 확장성이 더 중요하기 때문에 최대한 많은 파라미터를 가지도록 코드로 구현했다.
또 다른 중요한 점은 특정 서비스에 종속되는 컴포넌트는 지양해야 한다는 것이다(또는 추후에 개발). 예를 들면 채팅앱의 메세지 컴포넌트같은 게 있다. 세상에 존재하는 컴포넌트 종류는 엄청 많기 때문에 무작정 개발에 들어갔다간 컴포넌트만 개발하다 군대를(?).. 갈 수도 있다 나같은 경우.......... 어쨌든 최대한 서비스에서 공통적으로 사용되는 컴포넌트만 우선 만들었다.

 

다음은 레이아웃이다. 레이아웃은 다른 컴포넌트들을 포함하거나 전체적인 구조를 나타내는 컴포넌트이다.
아직은 Card랑 Row라고 이름 붙여진 두 개의 컴포넌트 밖에 없다.
Card는 토스같은 앱에서 주로 사용하는 컴포넌트이고 이쁘고 자주 사용하기 때문에 추가했다.
Row(이름을 잘못 지은 것 같긴하다)는 설정이나 프로필 탭에서 주로 볼 수 있는 컴포넌트이다.
추후 다른 레이아웃을 많이 추가해야겠다.

레이아웃

 

여기에서 실제 피그마 프로젝트를 직접 볼 수 있다.

Figma

 

디자인 시스템 외에도 MyMoya라고 하는 Moya라이브러리를 한 번 더 추상화한 모듈과 Foundation Framework 유틸을 위한 MyFoundationUtil 모듈 UIKit익스텐션을 위한 MyUIKitExt모듈을 포함하고 있다.

MyIOSKit의 모듈들

 

두 번째 라이브러리는 라이브러리라기 보다는 템플릿에 가깝다. Google, Apple로그인을 위한 샘플 코드이다.
Spring boot를 사용하여 제작했고 실제로 많아야 1시간 정도 작업을 하면(Google, Apple OAuth 서비스 등록 포함) 인증 로직이 구현이 된다.

레포지토리에 OAuth iOS 데모 앱도 만들어놨으니 이것도 그냥 복붙해서 갖다 쓰면 된다.

서버 코드 특성상 복제하기 쉽기 때문에 앞으로 이런 템플릿을 만드는 걸 연구해 봐야겠다. 해봤던 걸 또 하는 건 매우 귀찮으니 말이다.

GitHub - hhhello0507/my-auth-server: Spring auth server

 

할 일이 드럽게 많은데 이제 학기 말이니 프로젝트도 인수인계하고 빨리 튈 준비를 해야 겠다. ㅌㅌ
3학년이 되면 지금보다는 좀 더 자유로워 질 수 있겠지..?

 

함께 보면 좋은 글

[부자] - 시스템을 만들어서 돈 벌자

시스템을 만들어서 돈 벌자

[부자] - 돈 빨리 벌 생각 하지 말고 본질에 집중

돈 빨리 벌 생각 하지 말고 본질에 집중