UI 디자이너가
도전한 카메라 앱 제작기 (1)
UI 디자이너가 무작정 만들어 본 앱 개발
이 글은 처음 앱을 만들게 된 비개발자분들에게 조금이라도 도움이 되고자 작성했고
특히 UI/UX 디자이너분들에게 더 도움이 될 것 같다. 그리고 알았으면 좋겠다. 누구나 앱을 만들 수 있다는 걸
그러니 고민하고 계시다면 이 글을 읽어 보시라. "저 사람도 하는데 난 충분히 하겠는걸?"라는 생각이 들것이다.내가 항상 생각하는 게 날 막는 건 나 자신일 때가 대부분이었다.
일단 완선 된 앱부터 보자면
사진을 찍으면 폴라로이드 느낌으로 만들어주는 앱앱 전반적인 설명
https://www.behance.net/gallery/79329817/POLAROID-CAMERA-APP-LOW-POLAR
앱 스토어 페이지
https://itunes.apple.com/kr/app/low-polar/id1459060802
1. 뭐부터 해야 하지?
주제는 정했다. 카메라 앱... 뭔가 디자인 요소가 많고 다른 앱보다는 개발이 쉬워 보였다. (이때는 개발을 1도 모르는 상태... 지금이라면 말렸을지도...) 정하긴 했는데... 그럼 뭐부터 해야 하지? 디자인이야 늘 하던 거라 책상에 엉덩이 붙이고 하면 되겠지만 개발은 전혀 몰랐기 때문에 막막했다. 일단 최종적으로 뭘 만들어야 될지를 정해보자.
IOS로 개발 (난 애플빠다 이유 끝.)
힙한 카메라 앱 (어떻게 힙해질지는 미래의 내가 고민)
가장 단순한 형태 (거의 지켜지지 않았다)
유료결제 필요 (상업성 있는 걸 만들어 보고 싶었다)
그리고 준비물들이 있다. (ios앱 기준)
맥 OS가 돌아가는 기기 (아이맥, 맥북, 맥 프로, 맥미니)
엑스 코드 (ios앱을 만들기 위한 프로그램인데 무료이다)
개발자 등록 (12만 원 정도 한다. 1년 유지)
이렇게 정하고 ios 개발을 위해 조사를 하기 시작했다.
2. 스위프트? 테일러?
ios앱은 보통 2가지의 언어로 개발하는데 첫 번째는 오래된 Object -C 그리고 두 번째 swift가 있다. 비교를 해봐야겠지만 애플이 swift를 밀고 있다고 해서 그냥 그걸로 정했다.
이제 정했으면 배워야 한다. 학원, 책, 영상 다양하게 있었고 내가 처음으로 찾아본 건 학원이다. 뭐 말 안 해도 이런 it 쪽 유명학원들 다 아실 거다. 그리고 안 했다. 뭐 여러 가지 이유가 있지만 제일 큰 건 너무 비쌌고 몇 개월을 배워야 하는 게 싫었다.(나는 2~3개월 안에 앱을 만들고 싶었다.) 책도 알아봤지만... 뭔가 실무보단 언어에 대한 이해력을 높여주는 책들이 많았다. 여러 가지 이유야 있지만 난 영상을 좋아한다. 그대로 따라만 하면 구현이 되니 편한 것 같다 (가끔 책을 보고 할 땐 따라 해도 막힐 때가 있는데 그럴 때 참 힘들다.)
영상 강좌를 찾아본 결과 인프런, 유데미가 괜찮다 판단했고 유데미 영문 강좌가 할인하길래 구입해서, 따라 코드를 치긴 했지만 왜 그렇게 해야 되는지 알 수가 없어서 중간에 포기했다 (영어의 영원한 벽)
다행히 인프런에 한글강좌가 있어서 쉽게 이해할 수 있었다.(영문보다 괜찮은 거지 여전히 어렵긴 하다) 총 3개를 봤는데 2개는 서로 강사가 다른 샘플 앱 제작 강좌였고 나머지 1개는 오토 레이아웃에 관한 강좌였다. (오토 레이아웃 강좌는 꼭 보길 봐란다. 어차피 디자이너라면 이쁜 앱을 만들고 싶어 할 텐데 그걸 구현해줄 수 있는 부분이라 중요하다) * 광고라 생각할까 봐 링크는 걸지 않겠다.
3. 개발 쉽잖아?
코드 강좌를 2개 끝냈을 때 든 생각이 딱 저거였다.
"뭐 이제 개발해도 충분하겠네 ㅎㅎ 혹시 난 개발자 성향이었나?"
저런 생각을 가지고 카메라 앱을 만들기 위해 엑스 코드 열고 새로운 프로젝트를 만들었다.
그리고 아무것도 할 수 없었다... 나름 배웠다고 했지만 한 줄의 코드도 적지를 못했다. 정확히 말하면 어떤 코드를 적어야 될지를 몰랐다. 그때서야 깨달은 건 내가 배운 강좌 안에는 카메라 앱이 없었다는 것이다!
그리고 강좌 속의 앱들은 모든 것들이 준비가 되어있고 특정 한 부분만 작성하면 완성되는 거라 날 큰 착각에 빠뜨린 것이다. 차라리 내가 만들 앱에 기능들을 리스트업 한 다음 그 기능들 튜토가 된 강좌들을 사서 듣는 게 좋을 것 같다.
4. 카메라 앱? 도대체 카메라는 어떻게 구현하는 거야?
간단하게라도 카메라 앱 소스코드가 필요하다고 판단했다. 엄청난 구글링 끝에 여러 가지의 카메라 앱 샘플을 찾을 수 있었다. 엑스 코드로 열어보면 오류가 반이다. 왜냐? Object-c로 코드가 작성돼있다 보니 swift 충돌로 인해 오류가 뜨는 것이다. 된다 싶으면 너무 복잡한 카메라 앱 소스라 내가 도저히 손을 댈 수가 없었고 결국 포기하던 찰나에 소스코드를 판매하는 사이트를 찾았다. envato market인데 가끔 디자인 소스 때문에 들린 사이트이기도 하다.
소스 찾느라 지옥을 겪어 보니 무조건 사야겠다는 생각이 들었다... 그중에 가장 간단하게 카메라 기능이 구현된 앱을 찾아서 구매를 했고 가격은 2만 원 정도였다. 일단 판매하는 거라 그런지 코드가 깔끔했고 (그냥 보기에...) swift 기반이라 너무 좋았다.
지금에서야 생각해보면 구입하길 잘한 것 같다. 코드라는 게 어떠한 기능을 구현하기 위해 필요한데 이방식이 사람마다 다 다르다. 왜냐면 그 코드에서도 개인의 취향이 묻어나기 때문이다. 그래서 초보 개발자에겐 이 부분이 굉장히 헷갈린다. 하지만 구매용 코드는 그래도 가장 노멀 한 형태의 코드이기 때문에 좀 더 편한 부분이 있는 것 같다.
5. 후훗 이제 본격적으로 손을 놀려 볼까? 타다닥!
일거라 생각했지만 막상 했을 때 컨트롤 + C, 컨트롤 + V가 80프로였다... 예를 들자면 카메라 앱엔 보통 플래시 기능이 있다. 보통 플래시 on, 플래시 off, 플래시 auto 이렇게 3가지를 설정할 수 있는데 2주 정도 swift를 배운 나에겐 구현 불가능한 기능이다. 그래서 구글 검색창에 이렇게 검색한다.
"swift camera flash func"
그럼 다양한 블로그나 개발 커뮤니티에서 알려주며, 그걸 복사해서 붙여 넣기 하고 변수명만 내가 원하는 대로 수정한다. 이게 끝이다... 당연히 쉽게 못 찾을 때도 있고 적용이 제대로 안될 때도 많지만 보통은 이런 방식이었다. (현란한 코드 치기는 해 본 적이 없다.)
그래서 하다 보니 다른 검색 결과 값이지만 나중에 쓰일 것 같은 기능의 코드라면 무조건 즐겨찾기를 해놨다. 그렇다 코드는 치는 게 아니라 찾는 것이었다. (초보들에겐..)
다 캡처하기 힘들 정도로 즐겨찾기 해두었다.내가 코드를 찾을 때 방법을 순서대로 적자면
1. stackoverflow 검색 (보통은 여기서 다 나온다)
2. 기타 블로그 (의외로 일본 블로그가 좋은 것 같다)
3. 유튜브 (내가 구현하려는 기능의 튜토 영상을 찾는다)
4. 국내 커뮤니티에 질문 (페북 swift, 아이폰 데브)
5. 유료 강좌 (유데미에 강좌는 보통 2~3만 원 하는데 거기서 내가 구현하려는 기능의 강좌가 있다면 그걸 사서
그 챕터만 배운다)
5번은 딱 한번 해볼 정도로 잘하지 않는다. (돈이 들어서...) 그만큼 잘 검색만 하면 웬만한 건 다 나오긴 한다.
하다 보면 개념의 대한 이해가 필요할 때 있는데 그럴 땐 https://zeddios.tistory.com/ 여기서 도움이 많이 받았다. 블로그 주인장님이 설명을 아주 쉽게 적어두셔서 이해하기 편했다. (느낌표가 굉장히 많음)
찾을 때는 무조건 크롬이다. 왜냐면 사이트 번역이 가능하기 때문에...
6. 가라앉는 잠수함
처음에 카메라 기능을 구현하고 사진을 저장까지 했을 때 너무나도 기뻤다. 힘들긴 하지만 그래도 못할 정도는 아니네!!라고 생각했지만 역시나 잘못된 판단이었다. 코드가 점점 쌓이고 내가 원하는 기능들도 기존 코드들과 문제없으면서도 구현해야 했으니 구글링 해도 잘 나오지 않았다. (마치 정확한 퍼즐 조각을 찾아야 하는 듯한 느낌)
더 큰 문제는 하나를 수정하려면 너무 많은 것들을 바꿔야 했다. 정확한 동작대로 버튼을 누르면 작동은 하지만 거기서 조금만 벗어나면 오류가 났다. 이건 어쩔 수 없었다. 그냥 무조건 고쳐야 한다. 앱을 막 누르고 오류 나면 고치는 거다. 하지만 어떤 걸 고치기 위해 쉬운 길을 택하면 결국 다른 오류가 나왔고... 정말 끝없이 반복했다.
아무리 막아도 끝이 없었다.7. 필터 만들기
카메라 앱에선 어찌 보면 필터빨이라 할 수 있다. 내 서비스의 핵심은 찍으면 폴라로이드 필름에 넣어서 나오는 건데 이런 앱들은 많이 있다. 하지만 개인적으론 만족할 만 퀄리티의 폴라로이드 앱은 보지 못한 것 같다. (내가 아직 못 본 건지도...) 그래서 얼마나 이미지를 폴라로이드 필름에 합성 티 없이 자연스럽게 적용하느냐가 관건이었다. 이런 필터들이 포토샵에서 처럼 간단하게 확인 가능하다면 정말 편하겠지만...
코드에선 빌드해보기 전까진 알 수가 없다. 그래서 정말 시간이 오래 걸린다.
특히 내가 원하는 느낌을 내기 위해선 12개의 필터가 겹쳐져야 나올 수 있었기 때문에 며칠은 걸린 것 같다.
왼쪽에서 오른쪽 이미지가 되기까지 12개의 필터가 필요했다.애플의 필터나 블랜딩 모드는 디자인 툴에 나오는 방식과 달라서 그에 맞는 걸 찾아야 한다.
적용할 수 있는 필터들은 아래 링크에서 샘플과 함께 확인 가능하다.
애플 필터 레퍼런스
8. 지옥의 인앱 결제
솔직히 첫 앱 만들려고 했을 때 인앱 결제를 넣을까 말까를 엄청나게 고민했다. 괜히 한다고 했다가 결국 구현하지 못할까 봐 걱정했다. 그리고 뭔가 개발 초보자 입장에선 인앱 결제는 너무 무서워 보였다 (삼중 나생문 느낌)
인앱 결제에는 소모품, 비소모품, 정기구독이 있는데 내가 원한 건 비소모품 구매였다.
한번 구매하면 평생 쓸 수 있는 게 비소모품인데...
그럼 어떻게 구현할 것인가! 다른 거 없다 샘플 코드를 찾아서 넣기.
https://devmjun.github.io/archive/purchase-1
나는 이 사이트를 보고 구현했는데 코드뿐만 아니라 설명도 잘 돼있어서 굉장히 도움이 됐다 (그리고 비소모품 구매방식!) 만약 구매방식이 다르다면 다른 샘플 코드를 찾아야 한다. 따라 해 본 결과 잘되었고 이제 이 코드를 내 앱에 적용을 시켜야 했다.
하지만... 역시나... 일단 샘플 앱은 구매 페이지가 곧 메인 페이지였다. 근데 이런 앱은 거의 없다. 메인 페이지에서 몇 번의 뎁스로 들어가면 구매 페이지 (스토어)가 있고 거기서 결제를 한 후 메인에서 쓸 수 있는 방식인데 (나 또한 이방식) 저 샘플 코드를 수정하기엔 너무나 복잡했다.
왼쪽부터 메인 페이지, 구매 페이지, 구매 상세페이지이때 일주일을 여기다 쏟은 것 같은데... 다른 샘플 코드도 써보고, 다른 튜토도 찾아보고 했지만 결국엔 기존 샘플 코드를 이해하는 게 가장 쉬운 방법이었다... (이 코드는 가장 복잡했지만 그만큼 많은 기능들을 구현할 수 있었다.) 조언을 하자면 결제에 관련된 부분은 100프로는 아니더라도 7~80프로는 이해를 하고 넘어가야 된다. 왜냐면 앱 등록심사에 제일 큰 복병이 결제 부분이라 가장 이해도가 높아야 쉽게 넘어갈 수 있다.
그리고 절대 까먹어선 안 되는 게 "구매 복구"이다.
이건 아마 비소모품 구매에만 해당되는 것 같은데 구매한 상품은 다른 폰에서 (보통은 폰을 바꿀 때) 앱을 설치해도 그 상품을 쓸 수 있어야 한다. 그걸 위한 기능이 "구매 복구"이다. 이건 무조건 구현을 해야 되기 때문에 처음에 앱을 디자인할 때부터 어디다 넣을지 정해놔야 한다. (보통은 구매 페이지 근처에 두는 편이다)
https://brunch.co.kr/@dbwodnd17/3
