시트계산기 개발과정
시트계산기
시트계산기는 swift 언어로 개발한 Native app 입니다.시트계산기의 아이디어부터
swift 학습과정에서의 시행착오,
다국어 웹사이트 개발,
검색 SEO 작업,
홍보, 프로모션에 걸친
전반적인 과정을 블로깅 해볼 생각입니다.
실제 프로그램 코딩과 관련한 기술적인 내용은 다음 기회에 다뤄보도록 하고,
이 포스트에는 앱 개발 과정의 전반적인 흐름에 초점을 맞추겠습니다.
간단한 내소개
저는 개발 초보는 아니구요. 나름 경력 개발자 입니다.화면 개발자로 html / javascript / cordova를 이용해서 하이브리드앱은 여러번 개발해봤지만
swift로 iOS 전용앱을 개발한건 이번이 처음입니다.
swift만 봤을때는 완전 초급 개발자죠.ㅎ
이번 시트계산기 프로젝트에서는 swift 학습과 개발해서 완성하는데 3개월 정도 걸렸습니다.
직장을 다니고 있기 때문에 낮에는 개발하지 못하고,
퇴근하고 저녁 9시부터 새벽 1~3시까지 거의 매일 했다고 보시면 됩니다.
초반에 2주 정도는 동영상 강좌를 많이 봤는데, 강좌는 출퇴근 지하철에서 봤구요.
시트계산기 아이디어
제가 작년부터 모 사이버대학교에 경영학과 수업을 온라인으로 듣고있습니다.작년말 "경영통계" 과목 기말고사을 치는데 1년치 월 평균 관련 문제가 나와서
스마트폰 계산기를 꺼내 1년치 값을 입력하다가 실수로 중간에 값을 잘못 눌렀습니다.
그래서 다시 1월부터 신중하게 값을 입력해서 결과값이 나왔지만,
중간에 실수가 있었는지 검산할수가 없었습니다.
그래서 엑셀같은 계산기를 만들어 보자고 생각하고 방학기간 동안 개발하기 시작했습니다.
물론, 직장은 다녔습니다.
<초기 기획안>
먼저 아이디어를 구글 프레젠테이션으로 스케치 했습니다.
컴퓨터를 잘 못하는 와이프에게 보여주니 이게 무슨 계산기냐며 (ㅡ.,ㅡ) 이런 눈으로 보더군요.ㅎ
지금은 미국, 캐나다, 사우디아라비아, 페루, 쿠웨이트....
세계적으로 다운로드 받는다고 말하니 (O.O) 이런 눈으로 봅니다만.ㅎ
(다운로드 갯수는 말안했어요.ㅠㅠ)
디자인
<초기 디자인 시안>
디자인 시안은 몇일 안걸렸습니다.
오랜만에 시안작업을 했는데, 아직 죽지 않았져?ㅋ
물론 아주 고퀄은 아닙니다.ㅋ
<로고시안>
로고는 계산기의 equal (=) 을 동그라미에 넣은 간단한 형태입니다.
나름 중요한 의미가 있습니다.
시트계산기는 값을 입력하는 즉시 실시간으로 계산을 수행하기 때문에 = 버튼이 없습니다.
전자계산기가 발명된 이후 오랜시간동안 가장 중요한 역할을 했던 = 버튼을 기리는 의미에서 명예롭게 로고에 차용하기로 했습니다.
Swift 학습과정
Swift 공부를 해야합니다.유튜브에서 강좌를 검색해서 공부하기 시작했는데, 국내 강좌보다 해외 강좌를 주로 봤습니다.
국내 스위프트 강좌는 갯수도 많지 않아요.
앱의 화면을 그려야 하는데, XCode에서 화면을 그리는 방법은 두가지로 나눌 수 있습니다.
먼저 Storyboard로 화면을 만드는 방법이 있습니다.
이건 마치 파워포인트에서 그림을 그리듯이 마우스를 이용해서 요소들을 드래그해서 화면을 완성시켜 나갑니다.
다른 방법은 Storyboard를 사용하지 않고 프로그래밍 언어인 Swift 코딩으로 화면을 만드는 방법이 있습니다.
저는 과감하게 Storyboard를 사용하지 "않는" 길을 택했습니다.
이유는 유투브 채널 Lets Build That App 의 Brian님의 강좌의 최종 결과물의 퀄리티가 좋아서 이분의 시리즈로 공부하기로 했는데,
Brian이 Storyboard를 사용하지 않고, 코딩으로 화면을 만들기 때문입니다.
최종 결과물의 퀄리티가 좋다는건 그만큼 난이도가 높은 고급기능을 많이 사용한다는 의미입니다.
약 2주간은 Brian의 강좌를 따라하면 수많은 샘플앱을 만들었습니다.
그런데 여기에는 문제가 있었어요.
Brian의 유튜브 동영상은 약 2~3년전의 강좌도 있는데, 이때는 사용한 버전이 Swift 2 였습니다.
나는 Swift 4 인데, 강좌의 코드와 호환이 되지 않았습니다.
Xcode는 최신버전이 설치되면 다운그레이드가 되지 않아서
구글링으로 xcode를 다운그레이드 하는 방법을 찾아봤어요.
xcode7, 8, 9등 낮은 버전을 구해서 강좌의 버전에 따라 Xcode를 새로 설치해가며 공부했습니다.
(버전당 용량이 2~4GB 라는 압박.ㅠㅠ)
학습이 어느 정도 끝나고 Swift 3 환경에서 시트계산기 화면을 그리기 시작해서 몇 일 뒤에 화면을 완성했습니다.
그런데 화면이 완성되고 기능을 개발하려니 또 문제가 생겼네요.
버튼이나 레이블등 화면관련된 요소가 모두 코딩으로 되어 있으니 view 관련된 코딩의 양이 너무 많았습니다.
이대로 가다가는 후반에 기능부분 코딩과 화면 부분 코딩이 막 뒤썩여서 디버깅하기 어려워 질거 같다는 생각이 들었습니다.
그래서 화면은 Storyboard로 다시 그리기로 방향을 틀었습니다.
이렇게 되면 개발요소에서 화면관련된 부분의 코딩량이 줄어들어 기능관련 코딩에 집중할수 있어서 효율적입니다.
다시 초심으로 돌아가서 Storyboard 사용법을 공부했습니다.
이렇게 시트계산기는 Storyboard로 화면을 그리고, 기능은 코딩으로 만들었고,
일부 화면요소는 코딩으로 보강하는 형태로 만들었습니다.
데이터베이스
시트계산기는 유틸리티 앱입니다.유틸리티는 네트워크가 되지 않아도 빠르고 가볍게 실행되어야 되지요.
그래서 모든 정보는 디바이스 자체에 저장을 해야합니다.
계산값을 저장할 사용할 로컬 데이터베이스에 대해 알아봤어요.
DB는 크게 Apple에서 제공하는 CoreData와 외부라이브러리인 Realm이 있었습니다.
이번 시트계산기 프로젝트은 최종 결과물도 중요하지만 Swift 학습의 목적도 있었기 때문에
최대한 플러그인은 자제하고 기본기능을 사용하기로 맘먹고 CoreData를 채택했습니다.
하지만 이것은 곧 재앙이 되었지요.
CoreData는 인터넷 자료가 너무 부족했습니다.
뭐 어느정도 학습해서 기본적으로 데이터를 넣고 빼는건 문제가 되지 않았지만
relationship 이라는 SQL로 따지면 join에 대한 예제가 너무 부족했습니다.
시트계산기의 구조를 보면
하나의 문서(Document)안에 여러개의 시트(Sheet)가 있고,
시트(Sheet)안에 여러개의 필드(Field)가 있는 3단 구조입니다.
일반적인 관계형 DB로 따지면 document_table, sheet_table, field_table 3개가 join 되는 구조입니다.
CoreData에서 이 구조로 읽기, 쓰기, 수정하기, 삭제하기를 구현하는데 학습기간과 구현에 약 6주 정도 걸렸습니다.
전체개발은 완전히 멈춘 상태고, 저는 저녁마다 CoreData와의 전쟁을 벌였습니다.
그리고 결론은 CoreData는 포기하는걸로...ㅠㅠ
(하마터면 시트계산기 프로젝트 자체를 포기할뻔했어요ㅠ)
그리고 Realm으로 방향을 틀었는데, 사실 Realm은 학습하는데 얼마 걸리지 않았습니다.
CoreData에 비해 아주 쉽고, 맘에 쏙 들었습니다.
이 망할 CoreData만 아니었어도 개발기간은 반으로 줄었을껍니다.
Realm을 장착하고 프로젝트는 급전진 했습니다.
사실 DB에 데이터를 읽고, 쓰고, 수정하고, 삭제하기가 끝나면 개발은 끝났다고 봐도 되요.ㅎ
Autolayout개발
DB가 해결되면서 중요한 기능은 구현이 되었고, 이제 각 디바이스별로 최적화 하기 위한 autolayout 작업을 했습니다.xcode는 아이폰 시뮬레이터가 너무 좋기 때문에 실제 다양한 아이폰이 없어도 대부분의 환경에 대한 테스트를 해볼 수 있었습니다.
하지만 autolayout 역시 만만치 않았습니다.
저는 화면개발자라서 상대적으로 화면개발은 자신이 있었는데, autolayout은 아직도 정확하게 사용하지 못하겠습니다.
아이패드도 함께 완성하려고 했지만 autolayout의 장벽에 막혀서 일단 오픈때는 아이패드를 제외하기로 결정했습니다.
그리고 1.20 버전에서 아이패드도 호환시켰습니다.
다국어 지원
다음은 다국어 개발입니다.
다국어 개발이 제일 기대되고 재미 있었던거 같습니다.
지난 학기에 중국어 기초 수업을 수강하게 큰 도움(?)이 되었지요.
시트계산기 앱과 홈페이지는 4개국어를 지원합니다.
이번 다국어 개발과정에서 네이버 파파고의 새로운 발견을 했습니다.ㅎ
특정 부분에 대해서는 구글번역보다 훨씬 좋은 결과를 보였거든요.
앱내에의 다국어는 일부 메세지를 제외하면 거의 단어가 위주이기 때문에 큰 어려움은 없습니다.
문제는 앱스토어 소개와 홈페이지 내용을 다국어로 번역해야 되는데, 그 과정을 공유해볼까 합니다.
먼저 한국어로 앱에 대한 소개와 스크린샷에 들어가는 설명 문장, 홈페이지 문구 등을 작성합니다.
영어는 구글 번역기로 돌려서 직접 보정해서 완성했습니다.
다음은 일본어 번역을 했는데, 문제는 제가 일본어는 히라가나, 가타카나를 읽는 정도의 수준입니다.
번역 결과물이 맞는지 틀린지 모른다는거죠.
그래서 먼저 한국어를 일본어로 번역하고, 검증을 위해서 결과물을 다시 한국어로 역번역 했습니다.
그런데 구글번역기보다 파파고가 결과가 더 잘나왔습니다.
그래서 일본어 번역은 파파고로 진행했어요.
한국어를 일본어로...다시 일본어를 한국어로,
역번역은 구글번역과 파파고에서 같이 테스트 했습니다.
만약 역번역한 한국어 결과가 이상하면 초기 한국어를 수정해서 다시 일본어로 번역 -> 역번역 해서 결과물이 최대한 비슷하게 나오게 했다.
다음은 중국어
먼저 구글번역기로 중국어 번역을 테스트를 해봤습니다.
한국어 -> 중국어 -> 한국어 & 영어
영어 -> 중국어 -> 영어
일본어 -> 중국어 -> 한국어 & 영어
이렇게 3가지로 역번역한 결과물은 거의 외계어 수준입니다.ㅋㅋ
파파고에서 테스트를 해보니
일본어 -> 중국어 -> 한국어 & 영어 의 결과물이 제일 좋았습니다.
같은 한자권이라 그런지 일본어를 중국어로 번역하니깐 결과물이 제일 괜찮았어요.
몇일뒤에 중국어는 중국포털이 제일 잘 할꺼라는 생각이 불현듯 들었습니다.
혹시나 해서 baidu 번역기에서 일본어 -> 중국어 -> 영어로 역번역하니깐 결과물이 훨씬 좋은겁니다.
그래서 중국어 번역을 baidu에서 전부 다시 진행했습니다.
결론적으로
영어번역은 구글번역에서 한국어 -> 영어 -> 직접 보정
일본어는 파파고에서 한국어 -> 일본어 -> 한국어로 검증
중국어는 baidu에서 일본어 -> 중국어 -> 영어로 검증
이렇게 번역물을 완성했습니다.
앞으로 독일어, 프랑스어, 스페인어도 추가할 예정입니다.
(현지인들에게 피드백을 받는다면 정말 좋겠는데.ㅎ)
다음에 기회가 되면 다국어에서 국제화(i18n: internationalization)와 지역화(l10n: localization)에 대한 포스트를 한번 다뤄보겠습니다.
스크린샷
다국어 프로젝트는 독일에서 유럽 12개국 하이브리드앱을 만들때 경험을 했습니다.그때는 번역본을 현지인들에게 받았기 때문에 번역의 어려움은 없었지만,
문제는 스크린샷을 언어별로, 디바이스별로 다찍어야 한다는 겁니다.
이거 보통일이 아니에요.ㅋㅋ
스크린샷의 디바이스 의존성을 좀 줄이기 위해서 스크린샷에 디자인을 추가하기로 했습니다.
무슨말이냐면 예를 들어
아이폰 스크린샷은 5종류
5.8인치 - iPhone X
5.5인치 - iPhone 6 Plus, iPhone 7 Plus
4.7인치 - iPhone 6, iPhone 6
4인치 - iPhone 5
3.5인치 - iPhone 4S
아이패드 스크린샷은 3종류
12.9인치, 10.5인치, 9.7인치
이렇게 총 8종류의 디바이스 스크린샷을 찍어야 하고,
여기에 4개국어 별로 따로 찍으려면 총 32종의 스크린샷 세트가 필요합니다.
한 세트당 각 5장씩 스크린샷을 찍는다면...
시트계산기로 계산해봐야지.ㅋㅋ
무려 160장의 스크린샷 이미지를 찍어야 한다는 계산이 나옵니다.
이건 미친짓입니다.ㅋ
예전에 독일프로젝트에서는 12개국에 안드로이드/아이폰 까지해서 몇일동안 스크린샷 작업만 했던 기억이...ㅋㅋㅋ
다행히 App Store는 스크린샷 공유 기능을 제공한다.
예를 들어 4.7인치 iPhone 6는 한단계 위의 5.5인치 iPhone 6 Plus 스크린샷을 그대로 사용할 수 있습니다.
그런데 이럴경우 가장 작은 3.5인치 iPhone 4S에 5.5인치 iPhone 6 Plus 스크린샷을 사용하게 되면 사용자에게 너무 이질감이 생길꺼라 생각했습니다.
그래서 순수하게 스크린샷만 업로드하는게 아니고 아이폰 디바이스 그림(mockup image)에 스크린샷을 합성해서 디자인적인 요소를 가미하면 작은폰 사용자도 이질감이 좀 줄어들겁니다.
포토샵을 열어서 이런식으로 만들었습니다.
그런데 iPhone X는 베젤이 다른 아이폰과 완전히 다르기 때문에 특별우대해서 별도로 제작했습니다.
그래서 최종적으로
5.8인치 iPhone X용 6장
5.5인치용 6장
4개국어로 해서 총 48장의 스크린샷을 디자인했습니다.
사실 이것도 꽤 양은 양입니다.
그리고 아이패드는 다국어 지원을 포기하고 영어로만 6장 추가해서
총 54장의 스크린샷을 만들었습니다.
원칙대로 하면 160장인데 1/3로 줄었습니다..와..신난다.ㅡ.,ㅡ
다국어 홈페이지
다국어 홈페이지 제작도 중요하지만 그보다 더 중요한건 구글 검색에 잘 걸리느냐를 고민했습니다.즉 SEO(Search Engine Optimization) 다국어 홈페이지 제작이 필요했습니다.
처음에는 javascript로 다국어 처리했습니다.
하나의 html을 만들고 i18nNext.js 를 사용해서 방문자가 홈페이지에 접속하면 사용언어를 파악해서 번역된 문자로 교체하는 방법입니다.
이걸 전문용어로 "로케일 맞춤형 방식"이라고 합니다.
사실 이건 내 전문이라 별 어려움 없이 완성했습니다.
그런데 검색엔진 최적화 작업을 하려고 보니 새로운 사실을 알게되었습니다.
구글로봇은 이런 로케일 맞춤형 방식을 선호하지 않는다고 합니다.
물론 구글은 2015년 부터 로케일 맞춤형 페이지의 크롤링을 지원하지만 추천하지는 않는다고 하더군요.
관련 기사 (https://korea.googleblog.com/2015/01/crawling-and-indexing-of-locale.html)
왜냐면 페이지 공유나 검색 색인 지정에 적절치 않습니다.
(예전에 facebook용 다국어를 자바스크립트로 만들었는데, 공유할때 다국어에 문제가 있었던 적이 있었어요.)
그리고 결정적으로 이 로케일 맞춤형 방식은 구글에서만 지원되고, 네이버나 bing.com등 다른 검색사이트에서는 전혀 다국어를 인지하지 못합니다.
그래서 고민끝에 php 서버사이드로 언어별로 주소가 다른 다국어 페이지로 수정하였다.
한국어 : http://gaeyou.com/app/sheetcalculator/ko
영어 : http://gaeyou.com/app/sheetcalculator/en
일본어 : http://gaeyou.com/app/sheetcalculator/ja
중국어 : http://gaeyou.com/app/sheetcalculator/cn
다만 http://gaeyou.com/app/sheetcalculator 으로 접속하면 언어를 분석해서 각 페이지로 리다이렉트 시켰습니다.
그런데, 구글에서는 첫페이지에서 언어별로 리다이렉트 시키는 방법도 하지 말랍니다.
첫페이지에 들어오면 언어를 선택할수 있게 구성하고, 각 언어에서 다른 언어로 이동할수 있는 링크를 추가하라고 가이드 하더라구요.
이건 좀 뒤에 처리하기로...ㅋㅋ
검색등록하기
구글과 네이버, bing.com은 검색 최적화를 위해 웹마스터 툴을 제공합니다.각 검색엔진의 웹마스터 툴을 이용해서 크롤링 최적화를 시켰습니다.
(이부분은 기회되면 별도로 포스팅 해볼께요...필요하시면 댓글 써주세요.)
이제, 중국과 일본에서 홍보하기 위해 baidu.com와 yahoo.co.jp에서도 등록하려고 했는데 결론적으로 성공하지 못했습니다.
먼저 baidu는 중국인 만을 위한 서비스라서 외국인이 가입하기에 까다로운 절차가 필요합니다.
가상전화번호를 만들어서 가입해야 하는데, 가입도중 문제가 생기더니 24시간 이후에 다시 시도하라는 메세지를 받았습니다.
그래서 이것도 좀 한가할때 하기로 하고 패스...
yahoo.co.jp 는 별도로 등록하는 페이지가 없습니다.
"디렉토리 등록 서비스"라는게 얼마전까지 있던데..
올해부터는 이것도 서비스 종료가 되어서 구글링을 해도 방법을 못찾았습니다.
조만간 다시 시도해보고 성공하면 그때 포스팅할께요.
이렇게 앱도 AppStore에 등록했고, 다국어 사이트도 만들고, SEO 작업도 마무리 했습니다.
이제...
홍보가 남았습니다.ㅠㅠ
앱 홍보하기
이건 제일 어렵고 고독한 작업입니다.주위 사람들에게 링크를 보내줘도 일부 지인은 관심을 가지고 조언도 해주시지만
대부분의 지인들은 와~ 이러고 별 관심을 가지지 않는다는건 비밀이 아닐걸로..ㅋㅋ
(관심 가져주시는 분께 잘하자~ㅋ)
뭐 나도 그랬겠지? 하고 나를 되돌아보고 반성해봅니다.
트위터, 페이스북에 링크를 올려도 스팸신세가 되기 일쑤에요.
예전에는 어떤 서비스를 만들었을때는 이런 현실에 대해 절망감을 많이 느꼈지만,
이제는 필연적인 과정이다 생각해요.
뭐 다른사람이 나한테 앱이나 웹을 추천하면 나도 귀찮아 했을테니깐
다른 사람들도 다들 얼마나 바쁜데 당연히 세상의 모든 정보에 관심을 가질수 있겠어요?
온라인 서비스에서 사용자 반응에 대하여 나의 경험을 공유하자면
(나름 예전에 대박이 나서 1억뷰 나온 서비스도 운영했습니다.ㅋ)
1~2%의 사용자가 유효고객이라 생각하면 됩니다.
예를 들어 사이트에 광고를 달았다면 100명이 방문하면 그중에 1~2명이 광고를 클릭하는거죠.
페이스북에 링크를 공유하면 100명이 봤을때 1~2명이 링크를 클릭하는거고,
물론 사이트의 퀄리티, 광고의 주목성, 링크문구 내용에 따라 다소 유동적이겠지만
전반적인 사용자 반응에 대한 비율이라 생각하면 됩니다.
부푼 희망을 가지고 AppStore에 앱을 등록하고 통계를 보고 있으면 금새 절망감 느낄 수 있습니다.
내가 이렇게 몇 사람한테 사용하게 하려고 3개월을 밤잠 안자며 고생했나..싶어지죠.
디자인, 컨셉, 기능이 아무리 혁신적이어도
홍보하지 않는다면 모든게 무용지물입니다.
일딴 한국부터 홍보 작업에 들어갔습니다.
앱 리뷰 하시는 블로거들에게 메일을 돌렸는데, 그중에 처음으로 리뷰를 작성해주신 고마운분이 나타나셨습니다...
macinjune.com 에서 처음으로 리뷰를 써주셨는데, 한번 읽어봐주세요~
[iOS / 아이폰] 지나간 계산 과정까지 수정하는 시트형 계산기 앱| 시트 계산기
나의 입김이 전혀 안들어가고 금전적인 거래가 전혀 없는 사용기입니다.
너무 고맙고, 감동적이었어요.
내용도 너무 좋아서 매뉴얼로 사용하고 싶을 정도였습니다.
macinjune님 다시 한번 감사드립니다.
미국 블로거들에게도 리뷰를 부탁하는 메일을 보내고 있지만 아직은 딱히 반응은 없습니다.ㅋ
사실 이 블러그를 쓰는 이유도 개발과정의 노하우를 공유하고,
기록으로 남기는 목적도 있지만 홍보의 목적이 없다고 할수는 없죠.
홍보는 앞으로 계속 해 나가는거니깐 다음에 성공하면 성공기를 써보도록 할께요~
(제발...제발...ㅋㅋㅋ)
긴글 읽어주셔서 감사합니다~
이 포스팅을 다 쓴 현재 시점에서 AppPicker 메인 화면에 시트계산기가 2위로 레이팅 되었다는 기분 좋은 메일을 받았습니다.
역시 길은 있나봅니다.
무료다운로드: https://apzw3.app.goo.gl/sheet
댓글