애플사이다의 iOS 개발 일지

[인디 앱개발] ✨ 앱 기획부터 출시까지 참고한 링크 - 앱 기획, 디자인, 개발, 배포 준비 본문

iOS

[인디 앱개발] ✨ 앱 기획부터 출시까지 참고한 링크 - 앱 기획, 디자인, 개발, 배포 준비

Applecider 2022. 7. 20. 17:47

최근 2개월 동안 개발했던 앱을 출시하게 됐다.

기획부터 시작해서 디자인, 서버 개발, iOS 개발에 직접 관여하며 진행했던 프로젝트인 만큼 재밌었고 배운 게 많았다.

그 과정에서 단계별로 고려했던 점과 유용한 사이트를 공유하려고 한다.


✏️ 기획

  • 프로젝트 실행 목적과 목표를 설정한다.
    이때 목적은 취준용 앱 출시 경험일 수도, 평소 만들고 싶었던 서비스를 구현하는 것일 수도 있다.
  • 팀원, 진행 기간, 출시 목표일정, 타깃 사용자 등을 설정한다.
  • 개발자 지인이 있다면 기술 난이도에 대해 조언을 구한다.
  • 앱 출시 이후 업데이트를 진행해도 되므로 일단 최소한의 기능을 담은 MVP를 고민한다.
    과욕을 부리면 나중에 꼭 후회하게 된다. 최소한의 기능만 구현해도 예상보다 오래 걸린다.
  • 디스코드 채널 개설Notion, 구글 스프레드시트, 구글 드라이브, HackMD (다중커서 작업 가능)을 통해 팀의 소통 창구를 만든다.
    히스토리 관리가 어려운 카카오톡은 비추
  • 앱의 복잡도에 따라 와이어프레임 (필수), 정보구조도, WBS, 프로토타입 등을 활용한다.
    기능이 복잡하지 않다면 Figma를 사용하여 와이어프레임만 나타내도 충분하다.
    프로토타입은 프로토파이가 유명하다고 한다.
  • 기획문서의 종류는 이 블로그, 앱 설계서 작성방법은 이 블로그, 화면설계 및 프로토타이핑 툴의 종류는 이 블로그를 참고

예시 - 우리뭐먹지 프로젝트 Figma

🎨 UX / UI 디자인

  • <'네이버웹툰' 모바일 서비스 UX를 분석해보자> 시리즈 : 네이버웹툰 앱을 예시로 UX 관련 고려사항을 쉽게 설명한다.
  • Apple의 HIG 문서 (Human Interface Guidelines) : Apple의 디자인 원칙을 설명하는 문서이며, 디자이너/기획자/개발자 모두 읽어야 한다.
  • 디자인 툴은 Figma (무료), AdobeXD (유료) 등을 많이 사용한다.
  • 앱의 주요 기능을 고려해서 먼저 대략적인 컨셉을 정한다.
    게임 앱이라면 컴포넌트를 둥글고, 포인트 컬러를 2~3개 사용하는 귀여운 컨셉으로
    이커머스 앱이라면 선이 얇고, 미니멀한 디자인을 사용하는 세련된 컨셉으로 잡는 것이 좋다.
  • 컨셉을 정했다면 컴포넌트, 탭바, 네비게이션바 등의 구체적인 형태를 잡는다.
    비슷한 앱을 여러 개 다운받아서 살펴보거나, Pinterest에서 이미지를 검색해보자.
    (검색 키워드 : App design, Mobile app UX/UI 등)
  • 포인트 컬러를 정할 때 Pinterest에서 Color palette로 검색하면 유용하다.
  • 컴포넌트가 너무 밋밋해 보이거나, 특정 버튼을 강조하고 싶다면 그림자 효과를 주면 좋다.
  • 기본 한글 폰트가 구려 보여서 커스텀 폰트를 사용하고 싶다면 구글 무료 폰트, 네이버 무료 폰트를 사용하면 된다.
  • 이미지 또는 아이콘이 필요하면 Unsplash, Shutterstock 등의 무료 저작권 사이트를 활용한다.
  • 애니메이션은 Lottie가 유용하다. 

예시 - 우리뭐먹지 프로젝트 AdobeXD

🤖 서버 개발 

  • 흔한 아이디어인데 출시된 앱이 별로 없다면, 그만한 이유가 있을 수 있다.
    대표적인 이유는 DB 또는 서버 API가 구축이 안되어 있는 경우이다.
  • 우리뭐먹지 프로젝트의 경우에도 처음부터 메뉴 DB를 구축하고, 추천 알고리즘을 설계하고, 서버 API를 만드는 작업을 모두 해야 해서 시간이 오래 걸렸다.
  • 아이디어를 구상하는 단계에서 이미 만들어진 Open API 목록을 살펴보고 영감을 얻는 게 좋다.

📱 iOS 개발

  • 작업을 세부적으로 구분하여 STEP별 명세서를 작성한다.
  • 개발 도중에 디자인이나 서버 API가 변경되는 경우가 빈번하므로 디자이너 및 기획자와 긴밀히 소통하고,
    개발 과정에서도 기능 변화에 대비하여 유지보수가 용이하고 가독성이 좋은 코드를 작성한다.
  • StyleShare, 에어비앤비 등의 Code Convention을 참고한다.
  • 프로젝트 개발기간 동안 MacOS, Xcode가 자동 업데이트되지 않도록 설정한다.
    Xcode 버전은 팀원과 동일한 것이 안전하고, Minor 버전이 0인 것은 피한다.
  • GitHub의 PR 기능을 통해 Feature마다 배경, 작업 내용, 테스트 방법, 리뷰 노트, 스크린샷을 남겨두면 협업에 큰 도움이 된다.
  • GitHub의 Wiki 기능을 통해 프로젝트 일정 및 아카이브 문서를 관리하면 좋다.
  • 브랜치 관리는 Git Flow를 추천한다.
    Git Flow 사용방법은 지난 포스트 GitFlow로 브랜치 관리하기를 참고
  • 개발 중에 UX/UI 관련 커스텀 컴포턴트 또는 애니메이션 등을 고민할 때도 Pinterest가 유용하다. 
    (검색 키워드 : Tinder like swipe, Card swipe animation 등) 
  • 난이도가 있는 작업은 누군가 이미 구현해서 공개해뒀을 가능성이 높다.
    GitHub에서 여러 라이브러리의 소스코드를 뒤져보면 힌트를 얻을 수 있다.
    (검색 키워드 : Menu underbar, Underline menu bar, Custom segmentedcontrol 등)

예시 - 우리뭐먹지 프로젝트 PR

🍎 배포 준비 (AppStore 심사 체크리스트)

  1. 개발자 계정 (개인 $99, 팀 $299) : 1~4번은 AppStore Connect 사이트를 통해 생성한다.
    *상세 내용은 이 블로그를 참고
  2. 인증서 (개발용, 배포용)
  3. App ID 
  4. Provisioning Profile (개발용, 배포용)
  5. 개인정보 처리방침 : 개인정보보호포털 사이트에서 생성한다. URL을 제출해야 하므로 Notion으로 만드는 것을 추천한다.
  6. Test Flight (생략 가능)
  7. 앱 아이콘 (로고)
    - 1024*1024 이미지 1개 (png만 가능)를 준비한다.
    - Xcode 14 미만인 경우, 또는 크기별로 이미지 디테일을 다르게 표현하고 싶은 경우에는 11개의 크기별 이미지를 준비한다.
       *이미지 세트를 자동 생성해주는 사이트 참고
    - Apple이 알아서 모서리를 둥글게 만들어주므로 배경이 정사각형 형태여야 한다.
  8. AppStore 미리보기 영상 및 스크린샷 
    - 영상은 생략 가능하고, 스크린샷은 필수이다.
    - Simulator 화면의 캡쳐본을 제출해도 되고, MockUp 툴을 활용해서 화면별 기능을 설명해주는 이미지를 만들어 제출해도 된다.
    - 이미지 크기 때문에 심사 탈락하는 경우가 많다고 한다. Apple 공식문서의 스크린샷 사양을 꼭 확인하자.
    - iOS만 지원한다면 총 2개 세트 (아래 1~2번), iOS/iPad를 모두 지원한다면 총 4개 세트 (아래 1~4번)를 준비해야 한다.
       *요구사항 항목에 "앱이 iPhone에서 실행되는 경우 필요"라고 되어있으면 필수적으로 제출해야 한다는 뜻이다.
       1) iPhone 6.5형 예시 : iPhone 13 Pro Max, 1284 x 2778 픽셀, 실기기처럼 홈버튼이 아닌 노치가 있으면 통과한다. 
       2) iPhone 5.5형 예시 : iPhone 8 Plus, 1242 x 2208 픽셀, 실기기처럼 홈버튼이 있으면 통과한다.
       3) iPad 12.9형 예시 : iPad Pro(4세대, 3세대), 2048 x 2732 픽셀
       4) iPad 12.9형 예시 : iPad Pro(2세대), 2048 x 2732 픽셀
  9. App 기본 정보 : 앱 이름, 부제, 카테고리, 가격 등급, 개발자 연락처
  10. AppStore 마케팅 문구 : 프로모션 텍스트, 설명 (더보기 항목), 등록 키워드 등이 필요하다.
    - 마케팅 경험이 없다면 여기서 시간 소요가 크다. 주변 문과 친구들의 도움을 받으면 좋다.

    *상세 내용은 이 블로그를 참고
  11. 앱 사용방법을 나타낸 영상을 참고하면 보다 신속하게 심사결과를 받을 수 있다. (생략 가능)
    실기기로 앱을 실행화면을 녹화한 영상을 제출했었는데 심사요청 10분 만에 승인을 받을 수 있었다.

 

 

Configuring your app icon | Apple Developer Documentation

Add app icon variations to represent your app in places such as Settings, search results, and the App Store.

developer.apple.com

 

 

Configuring your app icon | Apple Developer Documentation

Add app icon variations to represent your app in places such as Settings, search results, and the App Store.

developer.apple.com

AppStore에 출시된 우리뭐먹지 앱 (iOS/iPad)

📣 홍보 / 마케팅

출시 직후 단기간에 다운로드 수가 높아야 AppStore 추천 앱에 언급될 수 있다. 

오픈카톡, 디스코드, IT서비스 관련 SNS 등 개발자 커뮤니티를 통해 홍보해야 한다.

 

홍보에 크게 신경 쓰지 못하더라도 ASO (앱스토어 최적화), SNS 마케팅은 해야 하는 것 같다.

- Reference

 

🍎 포스트가 도움이 되었다면, 공감🤍 / 구독🍹 / 공유🔗 / 댓글✏️ 로 응원해주세요. 감사합니다.

 

Comments