사이드프로젝트 입문기(2) - 선택왕 김댕댕 앱스토어 릴리즈 기록

첫번째 사이드프로젝트

선택왕 김댕댕 - 당신의 선택을 도와줄 댕댕이

‎선택왕 김댕댕

프로젝트 정보

• 프로젝트 기간 : 약 3일 기획+디자인+개발 + a 애드몹과 파이어베이스 붙이는 기간...
• 디자인 : 이예슬 / 개발 : 김윤재

 

프로젝트 목표

• 내가 쓸 만한 앱을 만들자
• 앱에 광고를 달아보자

 

---

 

 

기획

기획의 시작

무엇을 선택하든 후회하지 말자, 하는 신념을 가진 나는 중대한 선택 앞에서는 충분한 고민을 하고 신중한 선택마음이 끌리는 선택을 하는 편이다.

 

말이 좋아 신중한 선택을 한다는 것이지 사소한 것에도 무엇을 선택하는데 있어 굉장히 오랜 시간을 소비한다는 뜻인데,

심지어는 게임 닉네임이나 저녁 메뉴를 정할때도 그렇다.

 

출처 : 네이버 웹툰 모죠의 일지 155화. 아, 뭐 먹지

 

그런데 충분한 고민을 하고 난 뒤에도 선택이 고민된다면... 운명의 선택에 맡길 수 밖에 없는데

그 때마다 사용하던 앱이 바로 난수(랜덤 숫자)를 출력하는 어플이었다.

기존에 내가 쓰던 앱은 앱스토어에서 <난수>를 검색하면 가장 최상단에 뜨는 앱이었다.

 

보기엔 구리지만, "랜덤 숫자를 출력한다"는 메인 기능에는 아주 충실한 어플이다.

이 난수 발생기 어플을 나처럼 사소한 선택에도 시간을 많이 쏟는 사람들을 위한 어플로 발전시켜보면 어떨까? 하는 생각에 선택왕 김댕댕의 기획이 시작됐다.

 

 

---

 

기획 디벨롭하기

우선 기존 난수 발생기 어플의 기능을 분석해보자.

사실 분석하고 말 것도 없이, 이 앱의 메인 기능은 아주 단순하다.

 

1. 숫자 범위를 입력한다. (과정)

 

2. 범위 안의 숫자를 랜덤으로 출력한다. (결과)

 

그렇다면 이 난수생성기를 사람들이 왜 쓸지에 대해서 생각해 보자.

 

 

이름 그대로 난수(랜덤 숫자)가 필요할 때.

 

나는 처음에 주로 학생회로 활동하면서 행운권 추첨 등의 이벤트가 있을 때 급하게 다운받아 사용하곤 했다.

혹은 복권번호처럼 어떤 난수를 뽑기 위해서 사용하는 것이 일반적이다.

 

어떤 선택을 해야 할 때.

 

난수생성기는 숫자만 뽑지만,  나처럼 가끔 선택이 필요한 때 이 난수생성기의 힘을 빌리는 사용자들도 있다.

예를들면 이런 때다. "짬뽕과 짜장면 중 뭐 먹지? 1이 나오면 짬뽕, 2가 나오면 짜장면."

 

이 외에도 전혀 다른 방향으로 어플을 쓰는 사람들이 있겠지만, 내가 생각하기에 가장 큰 사용 이유는 이 두가지였다.

1의 목적은 기존의 어플들이 아주 잘 해결해주고 있지만 사실 2는 선택의 항목이 많아지면 숫자로 항목을 기억하기엔 무리가 있다.

그래서 기존 난수 발생기 어플처럼 숫자만 랜덤으로 뽑아주는게 아니라,

사용자가 설정한 항목도 랜덤으로 뽑아줄 수도 있으면 되지 않을까 생각했다.

 

 

그렇다면 우리 앱의 메인 기능은 두가지가 된다.

 

1. 난수(랜덤 숫자) 출력

 

2. 사용자가 지정한 랜덤 항목 출력

 

그러면 자연스럽게 필요한 다른 기능들도 정해진다.

 

 

 

1. 난수 출력

• 숫자의 범위를 설정 (과정)
• 랜덤 숫자를 출력하는 기능 (결과)
  • 중복 설정 기능
  • 숫자 범위 수정 기능

 

 

2. 지정된 항목 출력

• 사용자가 항목을 작성하는 기능 (과정)
• 작성한 항목 중 랜덤 항목을 출력하는 기능 (결과)
  • 중복 설정 기능
  • 항목 수정(추가 및 삭제) 기능

 

 

기능을 정리하다 보니 생각보다 두 뷰가 비슷한 듯, 달라보인다.

최대한 뷰와 뎁스를 줄여보기 위해 여러가지 UX 고민을 많이 했는데, 두 가지 뷰가 비슷하긴 하지만 전혀 다른 과정과 결과를 거쳐야 했기 때문에 결국은 뷰가 나눠져야 할 수 밖에 없었다.

 

다만 사용자가 느끼기에 뎁스는 최대한 줄여보고자 했다.

 

그래서 나온 와이어프레임...

 

와프 실화인가요? 네 실화입니다

 

위에서 언급한 이유 때문에,

커스텀(사용자 설정 항목) 랜덤 출력 뷰와 숫자 랜덤 출력 뷰 로의 진입을 어떻게 할 지를 가장 길게(라고 해봐야 몇시간 남짓) 고민했다.

 

 

 

[A안] 같은 메인을 쓰되, 항목을 추가하는 방식에서 뷰를 나눈다.

추가 버튼을 누르면 숫자와 커스텀 중 하나를 선택하게 하는 방식. 메인에서 내가 만든 선택들을 한꺼번에 볼 수 있다는 장점이 있지만 사용자가 느끼기에 선택을 하기 위한 뎁스가 하나 늘어난다. (팝업에서 숫자/커스텀 중 하나를 선택해야 하므로)

 

 

 

[B안] 그냥 다른 메인을 쓴다. (메인에서부터 뷰를 나누는 것)

즉 커스텀 메인에서의 추가 버튼과 숫자 메인에 있는 추가 버튼이 서로 다른 역할을 수행하는 것이다.

커스텀 메인에서 추가 버튼을 누르면 사용자가 항목을 커스텀할 수 있는 뷰로, 숫자 메인에서 추가 버튼을 누르면 숫자 범위를 지정할 수 있는 뷰로 이동한다.

 

나는 B안이 더 낫다고 생각했다.

 

애초에 메인에서 커스텀/숫자를 선택하고 입력 뷰로 진입할 수 있기 때문에 사용자에게 뎁스를 길게 거치지 않는다는 느낌이 들기 때문이다.

다만 이렇게 되면 같은 메인이지만 내가 현재 어떤 메인을 보고 있는지 확실히 사용자에게 구분해서 알려줘야 한다. 이거 마치 같지만 다르게 디자인해주세요...^^

 

 

그렇다면 이제 브랜딩을 해 보고 뷰를 그려 보자!

 

 

---

 

 

디자인

브랜딩을 어떻게 해야 할까

사실 짧은 기간을 목표로 한 프로젝트였기 때문에 디테일한 브렌딩보다는,

눈에 보이는 완성도를 위해  UX와 개발에 시간을 많이 투자하고 싶었다. (애초에 프로젝트를 하면서 브랜딩을 비중있고 하고 싶은게 아니기도 했고)

그래서 뷰를 그려보면서 떠오르는 느낌을 러프하게 잡아보며 동시에 브랜딩을 잡아가고 싶었다.

 

뷰를 그리다가 든 생각은 누군가의 선택을 도와주는 컨셉이라면, 어떤 인격체(캐릭터)가 있거나 친근하면 좋겠다는 것이었다.

그래서 곧장 캐릭터를 그려야겠다는 마음을 먹었고, 거의 1분만에(;;) 그냥 강아지로 정하고 그렸다.

딱히 중대한 이유는 없었다. 그래도 굳이 이유를 찾자면

 

1. 사람보단 동물 캐릭터가 다양한 사람들에게 더 편안하게 받아들여질 것이고

(사람을 메인캐릭터로 하려면 수많은 다양성을 함께 고려해야 한단 뜻이기도 하다)

 

2. 수많은 동물들 중 강아지가 사람에게 호의적이고(?) 가까운 동물이기 때문이다.

 

 

그렇게 김댕댕이 탄생했다.

 

캐릭터의 완성은 이 캐릭터가 가진 스토리라고 생각한다.

짧은 스토리라도 있어야 캐릭터에 부여된 인격(동물이지만 암튼)이 자라나기 시작하며, 그것이 곧 브랜딩에도 영향을 주기 때문이다.

<선택왕 김댕댕>이라는 아주 단순하고 가벼운 어플에 굳이 스토리를 설명하는 페이지가 있는 건 그런 의도였다.

 

김댕댕의 스토리

 

---

 

뷰 디자인하기

와이어프레임을 보고 뷰를 그려보기 시작했는데, 아무래도 가장 어려웠던 부분은 "같은 메인, 다른 추가 버튼" 이었다.

같은 생김새의 추가 버튼이 내가 지금 어떤 메인에 있는지에 따라 다른 뷰로 이동시켜주기 때문에 이를 사용자에게 직관적으로 알려줄 수 있는 디자인이 필요했다. 처음 김댕댕의 뷰는 이랬다.

 

 

그러나 추가 버튼이 변경 탭 바깥에 있으면

메인을 바꿀 때 버튼의 역할도 바뀐다 생각하기 어려울 것 같아서, 버튼을 아래와 같이 변경 탭 안쪽으로 옮겼다.

 

처음엔 <선택왕 김댕댕>이 아니라 <랜덤피커>였음ㅋㅋ

 

그래도 버튼이 다른 역할을 하는지 직관적으로 잘 느껴지지 않았다.

또, "커스텀 랜덤픽"과 "숫자 랜덤픽"이라는 말도 개인적으로는 좀 어렵게 느껴졌다.

사실상 숫자도 커스텀인데... 두개가 어떻게 다른거지? 싶은 느낌이 들었다.

 

이때 쯤 브랜딩의 방향성이 정해지면서, 기능의 이름도 좀 더 쉽게 바꾸고자 했고,

사용자가 한눈에 메인 기능이 다르다는 것을 인지하게 하기 위해 두 가지 메인에서 다른 색을 사용하기로 했다.

 

 

색을 다르게 주니 두가지 뷰가 전혀 다른 역할을 한다는 것이 보다 직관적으로 느껴진다.

용어도 커스텀은 "댕댕이에게 물어보기"로, 숫자는 콕 집어 "숫자 물어보기"로 바꾸었다.

앱이 좀 더 쉬워진 느낌!

 

 

메인에서 고민이 가장 길었기 때문에 메인 뷰가 가장 늦게 나왔는데,

그 외에 다른 뷰에서 고민했던 UX를 좀 더 기록해 보자면

 

 

왼쪽 : 사용자가 물어볼 질문을 추가하는 뷰 / 오른쪽 : 댕댕이가 추첨을 하는 뷰

 

사용자가 직접 질문을 추가하는 뷰와 댕댕이가 추첨을 하는 뷰의 항목 부분을 비슷하게 만들어서,

사용자가 추첨을 하는 뷰 안에서도 항목 추가와 수정이 가능하다는 것을 바로 인지하게끔 만들었다. (숫자 뷰도 마찬가지)

 

 

 

 

또한 가이드텍스트도 "제목을 입력해주세요", "항목을 입력해주세요"보다 직관적으로

사용 예시를 적어놓음으로써 사용자가 용도를 쉽게 파악하고 응용할 수 있게 했다.

 

---

기타

배너광고를 어디에 달면 좋을까?

현재 김댕댕 앱을 들어가면 메인 하단에만 배너광고가 뜬다.

 

 

 

모든 뷰에서 항상 하단에 고정시켜 놓을 수도 있었겠지만

사용자가 아래로 스크롤을 하면서 항목을 계속 추가하고 수정해야 하는 "물어보기" 뷰와 "추첨" 뷰에서는 하단에 광고가 있는 것이 사용성과 뷰 모두를 해친다고 생각했다.

 

메인의 경우에도 버튼이 하단에 있는데? 싶을 수 있지만 버튼이 위 두 뷰 보다는 보다 명확해서 광고와 분리된 느낌을 주고 있는 점,

스크롤되는 영역에 겹치지 않는다는 점 등을 이유로 버튼 하단에 광고를 넣기로 했다.

 

물론 광고를 수익을 추구하려는 목적으로 넣었더라면...

"뷰를 해치지 않는 선에서 사용자들에게 노출이 좀 더 잘되고, 선택까지 유도할 수 있게" 하면 더욱 좋겠지만,

애초에 애드몹 광고는 그런 고도의 사용자화를 고려한 광고도 아닐 뿐더러

광고의 비쥬얼이 이미 사용자들에게 부정적으로 인식이 된 경우가 많아서ㅠㅠ

오히려 앱과 분리되며 노출되는 느낌이 훨씬 나은 선택지라 판단했다.

 

---

앱을 릴리즈하고

후기

 

가벼운 앱을 생각했는데 뷰가 생각보다 많아졌다.

 

물론 디자이너인 나는 그리는데 어려운 뷰들이 아니었지만 개발 과정 상에서는 뷰가 생각보다 많았다.

(심지어 나는 뷰를 줄이겠다고 나름 재활용한다고 한거긴 한데...)

 

메인도 보기엔 같지만 배경도 다르고 컬러도 다르고 버튼의 역할도 다르기 때문에 아예 다른 뷰를 만드는 거라고...ㅠㅠ

그럼에도 불구하고 생각보다 짧은 시간안에 개발이 끝낼 수 있었고, 개발자에게 요구하지 않았던 화면 전환 애니메이션이나 팝업 애니메이션도 구현되어서 완성도가 좀 더 느껴지는 앱이 나올 수 있었다. 땡큐베리감사.

 

 

 

애드몹 개빡친다 연결하기 빡세다!

 

개발자가 아니라 연결하는데 있는 스트레스를 간접적으로만 느꼈지만.

 

iOS앱에 애드몹을 붙이려면 앱스토어에 출시한 다음, 애드몹 계정에서 앱스토어에 릴리즈한 앱을 검색하는 과정을 거쳐야 하는데

이 검색되기까지 걸린 시간만 일주일이 넘게 걸렸다.

 

구글링 엄청 열심히 해 봤는데 앱스토어에 릴리즈한 앱이 검색되는데는 보통 2-3일 정도가 걸린다고 하는데,

우리만 그런가? 싶기엔 그 전에 릴리즈했던 앱들도 7일이 넘게 걸리더라. 요즘 코로나 때문인지 전체적으로 구글 일처리가 굉장히 느려진 느낌이다. 광고 달려면... 인고의 시간을 견뎌야 한다는걸 참고하시길...