딜라이트룸에서 일한.ssul
•Als PPTX, PDF herunterladen•
20 gefällt mir•11,514 views
작년 8월부터 3월까지 하나의 앱을 만들기 위해 노력하고, 도전했고, 배웠던 경험담입니다:D
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 딜라이트룸에서 일한.ssul
Ähnlich wie 딜라이트룸에서 일한.ssul (20)
딜라이트룸에서 일한.ssul
- 2. An Jeungwon 중앙대학교 컴퓨터공학과 13학번 Software Maestro 2기 디발자 :P k a w o o u @ k a w o o u . k r
- 3. 딜라이트룸이 뭐하는 회사죠? D e l i g h t R o o m
- 4. 이거 만드는 회사입니다
- 5. 절대로 일어날 수 밖에 없는 악마의 알람
- 7. 작년 소마 모임에서 시작되었습니다. 딜라이트룸과의 인연은
- 8. 동창 주소록, 멤X를 같이 만들어가자는 멘토님의 추천
- 9. 원더X플이라는 회사에 들어감 하지만 내부 팀끼리의 정치싸움...
- 10. 노예되기 전에 빠져나왔습니다 계약서 쓰면 빼도 박도 못하잖아요
- 11. 회사 옥상에서 Sleep If U Can에 대한 아이디어 회의 구체적인 문제점, 나아가야 할 방향 등등.. 회사에 있을때
- 12. 회의하다 집에 못 들어가 찜질방에서 출근도…
- 13. 사실은 말이 CTO지.. 디자이너였습니다 딜라이트룸에 로 참여
- 14. 가 장 먼 저 같 이 했 던 일 세 부 기 획
- 15. 사용자의 니즈는? 지금까지의 앱에서의 한계는? 어떻게해야 사용자를 모을까? UI/UX는 어떻게? 한 달 정도의 긴 시간 동안 같은 고민을 반복 이 앱의 미래는? 새로운 기능은 어떤 것을?
- 16. 사용자의 니즈 사용자들을 어떻게 만족시킬 것인가? 아이디어 구상 만들어진 후의 문제점은? UI/UX를 고려 하면 어떨까? 아이디어 픽스 다른 사람들의 의견 정해진 규칙이 아니에요 저희는 이렇게 기획했었어요 N번반복(N>5)
- 17. 아침에 일어나서 볼만한 컨텐츠를 제공하자!
- 18. 단어장 컨텐츠 판매? (서울시 앱 공모전 서울시장상)
- 19. 가 되었습니다(...) 기획이 적당히 끝나고 디자이너
- 20. 첨엔 몰랐는데 정신차려보니 이러고 있더라구요......
- 21. 일자형 로고도 디자인하고
- 23. 마케팅을 해야하는데 프로모션 아트워크를 너무 대충이었음
- 24. 그래서 급한대로 프로모션 아트워크를 먼저 디자인
- 25. 디자인까지 해야해서 불가능할 것이라 생각했는데 하다보니 가능하더라고요 지금도 신기해요 ONE DAY CUT 홈페이지 제작 w w w . d e l i g h t r o o m . o r g
- 27. 안드로이드 구 버전 디자인
- 28. 안드로이드용 플랫디자인
- 29. 공개된 적은 없지만 새로 개발된 첫번째 버전 사용자에게 가장 익숙해야 한다며, 소극적인 태도로 디자인 그 후 개발도 다했었는데 뭔가 미묘한 느낌으로 마음에 안 들었음
- 30. 어떻게 해야 편리하게 사용할까? 나이 많은 노인들도 사용할 수 있을까? 디자인을 가져가면서 사용성도 가져갈 수 있을까? 이해하기 쉬우면서 빠르게 사용할 수 있을까? 기능을 직관적으로 이해할 수 있을까? 사용에 하는데 있어 즐거움이 있을까? UI/UX에 대한 고민 1 P X 의 디 테 일
- 31. 사용자는 모두 다.
- 32. 케이윌 – 가슴이 뛴다 MV(01:07) UI의 중요성
- 33. 알람 ON/OFF S W I P E 12시간 내에 울리는지 여부 알람 제거 기능 S W I P E 새로운 기능(메인)
- 34. 새로운 기능(알람 추가) 탭을 이용하여 공간 최소화 터치없이 한눈에 설정 값을 볼 수 있음 눌렀을 때 탭이 펼쳐지는가를 보여줌 5분 단위로 보여지다 멈추면 1분 단위로 펼쳐짐
- 35. 스와이프 제스쳐 새로운 기능(알림 도중) 알람 해제 방법에 대한 애니메이션 현재 날씨에 대한 정보 날씨에 맞는 배경 이미지
- 36. Swipe시 배경 이미지 흐림효과 새로운 기능(알림 도중) 알림 소리와 진동이 다시 울릴 때까지의 남은 시간 (인터렉션이 주어지면 초기화된다) 사용자가 알림 해제를 위해 수행할 방법을 애니메이션으로 보여줌
- 37. 그리고 디자인을 표현하기 위해 뷰들을 새로 제작
- 38. 원래 뷰가 이렇게 되는 Drawer가 필요 이런 것도 동시에 가능해야함 | Drawer View Controller |
- 39. | Swipe Picker View | 리스트 아이템을 애니메이션과 함께 추가가능 가로 뿐만 아니라 세로로 사용이 가능 문자 간의 간격을 디자인에 맞게 변경 가능 h t t p : / / m e 2 . d o / x u D J r 0 K s
- 40. 하지만 앱의 크기가 너무나도 커졌다!
- 41. 앱의 크기를 줄이기 위한 노력 Xcode에서는 PNG파일을 Pngcrush툴을 통해 자동 변환 추가로 TinyPNG를 이용해 한번 더 이미지 압축
- 42. 테마와 관련된 이미지를 Runtime-colorized 앱 Initialize 상황에 색상을 변경하여 로드
- 43. Runtime Bluring PNG가 아닌 JPG로 압축하여 저장 기본 이미지를 보여주다 전환
- 45. iOS에서 알람앱들이 아침마다 안 울림 실제로 알람이 안 울려서 몇 번 지각했습니다... 교수님 죄송해요
- 46. iOS에서는 알람과 관련된 API를 제공하지 않습니다
- 47. 동시에 백그라운드에 앱을 살려두는 것도 불가능
- 49. 음악 앱들이 백그라운드에서 꺼지지 않는 이유? ☆ HINT ☆ 자세한 건 공공연한 기밀이죠^오^..
- 50. 보여주기 위해서 이 또한 API는 없었습니다 날씨 컨텐츠를
- 51. | www.OpenWeatherMap.org | 하루에 API 콜까지 무료40,000,000 4 천 만 ( 4 0 m i l ) 전 세계의 날씨 사용 가능
- 52. 그런데 역시나 정확도는 낮습니다 한 겨울에 온도가 32도로 튄다거나..
- 53. 국가별 현지화 작업(1) iOS에서는 기본 언어와 시간 관련 언어가 다르다 위의 코드를 통해 시간 관련 언어를 알 수 있다 NSFormatter *formatter = [[NSFormatter alloc] init]; NSLog(@"%@", [[formatter locale] localeIdentifier]);
- 54. 국가별 현지화 작업(2) NSFormatter *formatter = [[NSFormatter alloc] init]; [formatter weekdaySymbols]; // Sunday [formatter monthSymbols]; // January [formatter quarterSymbols]; // 1st quarter [formatter eraSymbols]; // Before Christ [formatter AMSymbol]; // AM [formatter PMSymbol]; // PM 날짜/시간과 관련된 현지화된 문자열을 얻을 수 있다! 번역을 추가로 맡기지 않아도 됨
- 55. 암호화되지 않은 사용외부 아이콘폰트 h t t p : / / m e 2 . d o / x I P 9 7 M 5 s static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ CFErrorRef error; NSURL *url = [[NSBundle mainBundle] URLForResource:@"artill_clean_icons" withExtension:@"otf"]; CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url); CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider); CGDataProviderRelease(fontDataProvider); if(newFont) { if(!CTFontManagerRegisterGraphicsFont(newFont, &error)) { CFStringRef errorDescription = CFErrorCopyDescription(error); KWLog(@"Failed to load font: %@", errorDescription); CFRelease(errorDescription); } CGFontRelease(newFont); } }); 아래와 같이 동적으로 폰트를 로드하여 사용한다.
- 56. 아이콘도 바뀌어 갔습니다
- 57. 광고 이미지도 만들었습니다
- 58. 프리뷰 이미지도 국가에 맞는 스크린샷 찍고, 번역 맡기고, 돋보기 효과 추가하고, 언어에 맞는 폰트 구하고...... 죽는 줄 알았어요
- 59. Alarmy그렇게 탄생한
- 60. APPLE에서는 매년 개발자들에게 한번의 기회를 줌긴급 검수 E m e r g e n c y
- 61. 마케팅 기간이 아슬아슬할 때까지 개발
- 62. 그런데 애플 휴가 일정 때문에 검수 처리가 폭주했음
- 63. 애플 담당자에게서 미안하다는 메일도 날라왔음 마케팅을 포기해야 할 상황이었음
- 64. 마케팅 업체에서 일주일정도 미루자는 연락이 옴
- 65. 그런데 그날이 마케팅 업체에서 미뤄진 날짜였음 애플 휴가 전 마지막 날에 검수됨 휴가기간 동안 런칭/업데이트 전부 불가능
- 66. 나는 뭘 배웠나?
- 67. 하나의 별거 아닌 앱이라도 많은 고민을 거쳐 만들어진다
- 68. 다른 관점을 가진 사람과의 토론은 서로를 성장시킨다
- 69. 기술이 아닌 불편함에 대해 고민할 때 좋은 앱이 탄생한다
- 70. 아쉬움.. 좀더 많은 경험을 쌓은 상태에서 도전했다면 훨씬 완성도 높은 앱이 되지 않았을까......
- 71. Q & A
- 72. Kawoou / Facebook Blog / kawoou.kr
Hinweis der Redaktion
- 안녕하세요. 오늘 발표를 맡게 된 13학번 안정원입니다. 교수님께서 발표를 말하셨는데 사실 이전에는 어떻게 발표했는지 몰라서 최대한 진지하지 않고 가벼운 분위기에서 작년 8월부터 올해 3월까지 딜라이트룸이라는 스타트업에서 활동하면서, 하나의 앱을 만들기 위해서 노력하고, 도전하고, 배웠던 내용을 전달해드리고자 합니다. - 일단 저에 대해서 소개하자면 저는
- 중앙대 컴퓨터공학과 13학번인 안정원으로 소프트웨어 마에스트로 2기로 활동했었습니다. 현재는 Add2Paper라는 회사에서 일하고 있고요. 조금 레어하다는 디발자입니다 :D 사진은 프사기로.. 조용히 넘어가주세요 - 그럼
- 딜라이트룸이 뭐하는 회사일까요? - 바로
- 이거 만드는 회사입니다. 바로 Alarmy라는 알람 앱인데요 - 이 앱은
- 예전에 Sleep If U Can이라는 이름으로 여기 저기에서 기사화되었던 앱입니다. 이름을 바꾸게 된 이유는 이름자체가 길고 해깔려 하시는 분들이 계셔서 좀더 쉬운 이름인 Alarmy로 바꾸게 되었습니다. - 그럼 어떤 앱인지 영상을 보겠습니다.
- 제가 이 앱을 만드는 딜라이트룸에 동업자로 참여하게 된 인연은
- 작년 소프트웨어 마에스트로 모임에서 시작되었습니다. 소프트웨어 마에스트로 모임은, 비공식적으로 멘티 뿐만 아니라 멘토가 모여 서로가 살아가는 이야기나 개발했던 이슈들을 술과 함께 얘기하거나 그냥 아무 생각없이 신나게 노는 모임인데요. 저도 여느 때나 다름없이 모임에서 멘티님들과 함께, 멘토님과 이러저러한 얘기를 하며 있었는데 - 딱, 그 때 멘토님께서 주위의 몇 명에게만 말씀하시더라고요.
- 다들 한번쯤은 들어보셨을 동창 주소록, 멤 어쩌고 하는 앱을 만드는 회사에서 같이 만들어 나가보지 않겠냐고 말입니다. 자신이 지금 꽤 역할이 크다고 재밌게 돈도 .. 음 아무튼 만들 수 있을 거라고 하시더라고요. 정말 솔깃했습니다. 그 때 같이 얘기를 들었던 분들이 딜라이트룸의 초기 멤버가 되었는데, 그 얘기는 좀 이따가 할께요. 하지만 그땐 방학이었지만, 곧 개강이 다가오는 상황이라 이 회사에 들어가게 된다면 휴학을 꼭 해야 하는 상황이었습니다. 그래서 일단은 같이 원더X플이라는 회사에 들어가서 1-2주 정도만 일해보면서 상황을 보자고 얘기가 되었습니다. - 그런데 실제로 들어가서 보니 멘토님의 얘기와는 조금 다르게
- 회사의 내부 팀끼리 누가 이 앱을 만드는데 더 큰 역할을 했느냐로 정치 싸움을 하고 있더라고요. 한마디로 멘토님이 말씀하신 것들은 불가능한 것이었죠. 그래서 이 상황을 어떻게 해야 하나 고민하고 같이 들어왔던 분들과 얘기를 많이 하면서 방향에 대해서 - 결정을 내렸고
- 계약서를 작성하기 전에 빠져 나왔습니다. 사실 계약서 쓰고 나면 빼도 박도 못하잖아요. 어짜피 이 회사에서 아무것도 못한다는 걸 알고 있는데 말이죠. - 그래도 1-2주 정도 회사를 다니면서 했던 것들이 있는데
- 이 회사에는 옥상에서 회의할 수 있는 공간이 있는데 그 장소에서 지금의 DelightRoom의 사장님과 함께 Sleep If U Can에 대한 나아가야할 방향, 구체적인 문제점, 새로운 아이디어에 대해서 고민했었습니다. 사실 그때는 연애로 보자면 마치 썸을 타듯이 완전히 앱에 대해 직접적으로 도움을 주지 않았고, 간접적으로 한 발짝 떨어진 상태에서 도움을 드렸습니다. 그래도 이 앱의 성장 방향에 대해 마음이 갔는지, 이미 딜라이트룸에서 일하고 있는 것처럼 - 밤새 회의하다
- 지하철 막차가 끊기는 바람에 집에 못 들어가 찜질방에서 바로 출근하기도 했습니다. 지금 생각하면 그때의 저도 참 대단하다 싶어요. 아무튼 그렇게 고민을 하면서 아이디어를 고민하다보니 사장님께서 회사를 나가는 날 지하철에서 말하시더라고요. “사실 큰 기업이 아니라서 큰 돈을 주진 못하겠지만, 그래도 생활비로 쓸 수 있는 돈과 지분을 떼줄 테니까 같이 만들어보지 않을래?” 이미 그때는 마음이 간 상태였지만, 사실 그런게 있잖아요. 뭔가 바로 수락하면 싸 보일 것 같은… 그래서 그 땐 생각할 시간을 달라고 하고 - 나중에 3일정도 지나서 연락드리고,
- 딜라이트룸이라는 스타트업에 기술이사로 참여했습니다. 그리고 동시에 사무실도 분당 서현에 잡았습니다. 거기를 잡은 이유는, 어디를 가든 교통이 상당히 좋았거든요. 예를들면 강남, 사당, 흑석까지 한번에 갈 수 있는 버스가 있다거나 말이죠 근데 사실 회사에서 한 일들을 생각해보면 기술이사라기 보단 디자이너에 가까운거 같지만요. 비율로 보자면 디자인 작업이 70%...? 아무튼 이제 진짜로 딜라이트룸에 들어왔으니 지난번 회사 옥상에서 일했던 것처럼 소극적으로 회의한 내용을 - 그대로 사용할 수는 없으니
- 앱에 대한 세부 기획을 먼저 했습니다. 같이 들어왔던 한분이 더 계셨는데 사실 집에서 출근을 하는 상황이라 사실상 사장님과 저 둘이서만 기획을 한거나 마찬가지였는데, 이때 정말로 많은 고민을 했습니다. 지금도 이때 픽스한 아이디어를 다 완성하지 못할 정도로 장기적인 플랜으로 말이죠. - 그렇게 기획하는 한달동안 저희는
- 다음과 같은 질문들을 반복해서 고민했습니다. 알람을 사용하는 사용자의 니즈는 무엇인가? 지금까지의 알람 앱들의 한계점은? 어떻게 해야 사용자를 모을 수 있을 것인가? 어떤 기능을 넣어야 될까? 개발기간을 고려해 UI/UX는 어느 수준까지? 이 앱의 미래는 어떻게 될까? - 저희는 이런 질문들을 다음과 같은 방식으로 고민해왔는데요
- 그렇다고 이 방식이 정해진 규칙이라는 것은 아니에요. 단지 저희가 이렇게 했다는 것을 보여주고 싶었어요. 아무튼 먼저 사용자의 니즈를 찾아내고 사용자들을 니즈가 정확히 어떻게 해야 만족시킬 수 있을 것인지 고민하여 그것들을 바탕으로 아이디어를 구상합니다. 그리고 나온 아이디어를 바탕으로 하는 고민은 만들어진 후의 문제점인데요. 이 과정에서 많은 아이디어들이 퇴짜를 맞습니다. 단점없는 아이디어는 존재할 수가 없으니 최대한 많은 사용자를 수용할 수 있는 아이디어를 내야하기 때문이죠 그리고 이 과정을 거치고 다른 사람들에게 의견을 듣습니다. 예를 들면 친구가 될 수도 있고, 멘토님이 될 수도 있죠. 왜냐하면 ‘내’가 아닌 ‘다른 사람’의 시각에서 아이디어를 바라보는 것은 매우 중요한 일이거든요. 그렇게 받은 의견을 반영해서, UI와 UX를 고려한 간단한 디자인을 생각해봅니다. 아이디어가 아무리 좋아도 UI/UX를 깨거나 앱과는 완전히 동떨어진다면 안되니까요. 그리고 마지막으로 하나의 아이디어가 나올 때까지, 아이디어들은 최소한 5번을 다시 구상하고 실제로 하나의 아이디어를 픽스합니다. 굉장히 힘든 방법으로 아이디어를 구상했지만 그만큼 좋은 앱이 나왔다고 생각합니다. 근데 제 생각일 뿐이려나요? - 그렇게 나온 아이디어의 몇가지는
- 아침에 일어나면 언제나 볼만한 컨텐츠를 제공해주는 것으로 예를들면 오른쪽의 날씨와 같은 정보를 말이죠. - 또 다른 아이디어로는
- 알람 해제 방법이나 단어장과 같은 컨텐츠를 판매하는 것입니다. 지금 보이는 앱은 ‘서울시 앱 공모전’에 나가 ‘외워서 알람해제’라는 이름으로 서울시장상을 받은 앱으로 뜻을 보고 단어를 입력하면 알람이 종료되고, 그 때 뜻을 이해하지 못한 단어는 단어장에 기록되는 앱입니다. 그런 식으로 단어장과 관련된 컨텐츠를 판매하는 것이죠. - 뭐 이런식으로 기획을 끝내고
- 디자이너가 되었습니다. - 사실 처음에는 몰랐는데,
- 정신 차려보니 이러고 있더라고요….. 회사에는 디자이너가 없다보니 이렇게 된거에요. - 그래서 그렇게 회사에서
- 일자형 로고도 디자인했고,
- 명함도 디자인했습니다 하지만 그래도 막상 디자인을 하는데, 아무 의미가 없는 뭔가를 만든다는 건 마음에 안들더라고요. 그래서 명함에 패턴들의 차이를 주면서 Creative를 표현했고, 어두운 부분과 밝은 부분이 나눠지도록 Delight를 표현하였습니다. 그리고 밑에 이름 위에 있는 파란 줄은 멤버별로 다른 색깔을 가지도록하여 Sensation함을 표현하였습니다. 그렇게 의미를 담으려고 몇 번씩 갈아엎으니까 디자인이 잘 나올 수 밖에 없더라고요. - 원래 Sleep If U Can 1버전은 아웃소싱을 통해서 만들어진 것이었는데 그 버전으로 마케팅을 하게 되었습니다.
- 그런데 막상 마케팅을 하려고보니 외주로 작업했던 프로모션 아트워크가 이렇게나 대충 만들어져 있더라고요… 저는 이제 홈페이지 쪽을 작업하기위해 준비하고 있었는데, 이런 상황이 발생하니 결국 .. 디자인은 제게 넘어오고 하… - 아무튼
- 급한대로 홈페이지 작업은 다음으로 미루고 아침이라는 느낌을 살려 다시 디자인했습니다. 하.. 근데 너무 급하게 만들어서 지금 다시보자면 저 가운데 있는 타이포 좀 다시 하고 싶네요 아무튼 그건 그거고 - 이 작업이 끝났으니 홈페이지 작업으로 넘어왔습니다.
- 이 홈페이지를 만들 때 정말로 즐거웠고, 그래서 그런가 하루 만에 완성되었습니다. 왜냐고요? 지금까지 디자인만 하다가, 처음으로 코드를 짰거든요. 아.. 인생의 낙이 이거구나 싶더라고요. 근데 지금 이걸 다시 하루 만에 만들라고 하면 아마 전 못할꺼에요. 맨날 이 홈페이지 볼때마다 신기하다고 느끼고 있구요 - 이제 회사 홈페이지도 만들었으니
- Sleep If U Can 앱에 대한 페이지도 만들었습니다. 위에 보면 Alarmy이라고 적혀있는데, Sleep If U Can으로 된 이미지 파일을 제가 지워버렸나 찾을 수가 없더라고요. 이렇게 홈페이지들 작업이 끝이 나고 실제 앱 작업으로 넘어갑니다. - 아이폰 작업을 하기 전에 먼저 안드로이드를 작업했는데 이유는…
- 구버전 디자인이 이랬거든요 사용자에게 가장 익숙한 디자인이란 안드로이드 기본 앱이라는 생각에 그 디자인을 그대로 사용했었다고 하시던데, 이 디자인이 가장 익숙하긴 하겠지만, 솔찍히 예쁘지는 않잖아요. 맨날 드는 생각이 “구버전을 쓰던 사용자들은 얼마나 답답했을까”에요. 그러다보니 가장 많은 사용자가 있는, 안드로이드를 먼저 디자인해야겠다는 생각이 들어 - 먼저 디자인했습니다.
- 아이폰과 안드로이드 모두 요즘 계속 주목 받고 있는 플랫디자인으로 디자인했는데, 플랫 디자인에도 여러 파생되어 나온 디자인들이 많아요. 그중에서 안드로이드는 아이폰과 달리 오리지널 플랫 디자인으로 작업했습니다. 왜냐하면 안드로이드는 아이폰만큼 UI 표현하기가 쉽지 않기에 색다르게 도전적인 디자인을 시도해보지 못했고, 그렇게 오리지널 플랫디자인으로 디자인 작업을 하고 아이폰으로 바로 넘어가려고 하니까 - 아니나 다를까
- 이렇게 미묘한 디자인이 탄생했습니다. 디자이너들은 뭔가 하나에 대해서 디자인을 하고 있으면 그 시각에서 벗어나기 쉽지 않은데, 그러다보니 나름 괜찮다고 생각해 개발까지 다 해나갔습니다. 그런데 다 만들어지고 나서 다시 보니 처음에 내가 생각했던 느낌과 완전히 달랐고, 디자인도 안예쁘더라고요. 뭔가 열심히 만들었는데 이렇게 맘에 들지도 않고 친구들도 없이 혼자서 분당에 있다보니까 - 자연스럽게
- 편리함이라는게 어떤걸까? 나이에 상관없이 사용할 수 있을까? 디자인을 가져가면서 사용성도 가져갈 수 있을까? 직관적으로 이해할 수 있으면서 빠르게 사용할 수 있을까? 사용하는데 즐거움을 얻을 수 있을까? 하나의 UI를 구성할 때 다음과 같이 UX를 고려하며 고민을 하다보니, 시간이 조금 지나니 이 모든 고민들이 하나의 결론으로 이어지더라고요. - 바로
- 사용자는 모두 바보라고요. 사실 모든 사용자가 바보라는 것은 일반화의 오류를 범하는 감이 있는데, 진짜로 사용자 모두가 바보라는 것이 아니라. 다양한 사용자들을 이해시킬 수 있는 디자인을 하기 위해서는 이런 생각을 가지고 디자인을 하는게 좋다는거에요. 예를들어 아무것도 없는 화면인데, 화면을 아래로 내리면 어떤 기능이 나온다고 해봐요. 튜토리얼도 없구요 만든 사람은 이 기능이 아주 편하다는 것을 알지만 과연 어떤 사용자가 이해할 수 있을까요? 이렇게 UX를 고려한 UI는 굉장히 중요합니다. - 얼마나 중요하면
- 아이유가 뮤직비디오에서 UI의 중요성을 홍보하고 있겠어요. .. 아무튼 이렇게 중요한 고민한 UI들를 - 앱에 새롭게 담았습니다.
- 튜토리얼을 통해 SWIPE를 사용하여 쓸 수 있는 기능을 보여줘 알람 ON/OFF와 제거를 손쉽게 할 수 있도록 하였습니다. 그리고 12시간 내에 울리는지 여부를 보여줘 시간과 반복 주기를 통해 내일 울리는지를 확인하는 시간을 줄이도록 하였습니다. - 알람 추가 화면에서는
- 모든 기능을 다 한번에 보여줘 스크롤을 해야하는 번거로움을 없애기 위해 탭으로 기능들을 묶어, 한눈에 설정 값을 확인하고 필요한 기능만 수정하도록 했습니다. 또한 60분을 5분 단위로 보여주다. 멈추면 1분 단위로 펼쳐지도록 하여, 5분 단위로 알림을 설정하는 사람들과, 1분 단위 알림을 사용하는 사용자 모두를 배려하였습니다. - 그럼 이번엔 알람이 울리는 상황을 봅시다. 이 부분은 지금까지의 알람과는 차별화된 포인트가 많은데요.
- 알람이 울리면 다음과 같은 화면이 보이게 됩니다. 날씨에 맞는 배경이미지가 보여지고, 현재 날씨에 대한 정보를 바로 보여줍니다. 그리고 스와이프 제스쳐가 애니메이션되어 사용자가 어떻게 반응해야 할지를 직관적으로 보여줍니다. 그리고 사용자가 제스쳐에 맞게 반응하면 - 다음과 같은 화면으로 넘어가게 됩니다.
- 이렇게 화면을 나눈 이유는 한 화면을 통해 모든 기능을 보여주기에는 복잡했고, 아이가 있는 사람들이 알림을 끄는 과정을 수행하는 동안 소리가 나지 않는 것도 중요했기 때문입니다. 위에 있는 Circular Loading바가 표현하는 것도 그런 진동과 소리가 다시 울리고, 이전 화면으로 돌아갈 때까지의 시간을 표현하는 것입니다. 그리고 사용자가 알림을 해제하기 위한 방법이 화면의 가운데에 표현되는데 지금처럼 핸드폰을 50번 흔들어 알람을 해제하는 화면에서는 가운데의 핸드폰이 좌우로 흔들리는 애니메이션을 보여줘서 기능을 바로 이해할 수 있도록 작업하였습니다. - 그런데 이런 다양한 UI를 iOS에서 지원하지 않을 것이기에
- 디자인을 표현하기 위해 뷰들을 새로 제작하게 되었습니다. - 먼저 작업한 뷰는
- Drawer로 왼쪽 이미지와 같은 모습을 보여주는 기능입니다. 하지만 이 앱을 만들 때는 오른쪽의 모습처럼 앱이 줄어드는 모습을 보여줄 수 있어야했습니다. 오른쪽과 같은 모습의 디자인은 Dribbble이라는 디자인 공유 사이트에서 실험적으로 도전하고 있는 디자인으로 실제로 사용되고 있는 앱은 별로 없지만 이 기능을 통해 옆에 줄어들어 있는 앱이 다음과 같은 설정을 통해 바뀐다는 것을 보여줄 수 있다는 심리적인 느낌을 전달해주는 장점이 있기 때문입니다. 지금 그림에서는 포함되어 있지 않지만 테마와 같은 기능을 사용할 때는 큰 효과를 볼 수 있습니다. - 그리고 아까 위에서 UI에 대해서 설명할 때 5분 단위로 보이다가 1분 단위로 보여지는 기능이 있었는데 그 기능을 구현하기 위해
- 다음과 같은 Swipe Picker View를 제작하게 되었습니다. 이 기능은 위의 주소에서 사용하실 수 있습니다. 이걸 직접 만들게 된 이유는 중간에 셀을 추가하는 Swipe Picker는 오픈소스로 많았지만 제가 생각하는 애니메이션을 지원해주는 오픈소스는 없었고, 이 뷰는 흔들어서 알람 해제하는 기능의 흔드는 횟수를 설정하는 기능에서 세로로 사용되기도 하는데 가로와 세로로 사용할 수 있는 것도 없었기 때문입니다. 이걸 만들면서 왜 테이블 뷰 컨트롤러에 beginUpdates라는 메소드가 있었는지를 이해하게 되었습니다. - 아무튼 그렇게 앱을 제작하다 보니 이런 문제가 발생했습니다.
- 앱의 용량이 너무나도 커지게 된 것이었죠. 겨우 알람앱이 왜 이렇게 용량이 크냐며 욕 들을 것이 뻔한 상황이었습니다. - 그래서 용량을 줄이기 위해 다양한 시도를 하였습니다.
- Xcode에서는 앱을 컴파일 할 때 자동으로 PNGCRUSH 툴로 이미지를 압축하는데 이미지를 한 번 더 압축하기 위해 TinyPNG를 이용해 압축했습니다. 사실 이 과정은 큰 효과를 보기는 어려웠습니다. 이미지에도 압축의 한계가 있을 것이기 때문입니다. 그래서 용량을 어떻게 해야 줄일 수 있을까 고민하다 - 다음과 같은 방법을 생각했습니다.
- 테마를 사용하는데 이미지가 색깔에 따라 따로 가지고 있는 것은 용량 낭비라는 것이죠. 그래서 이 모든 이미지를 다 흰색 이미지 하나로 바꾸었습니다. 한 번이라도 그래픽스 쪽이나 RGB에 대해서 공부하신 분들이라면 아실텐데요. 흰색은 Floating-point로 표현하면 1.0이고, 검은색은 0.0입니다. 그렇기 때문에, 흰색에 다른 색을 곱하게 되면 그 색깔이 나온다는 것입니다. 이렇게 이미지를 바꾸게 되면 테마가 6개라면 용량을 1/6로 줄일 수 있게 됩니다. 물론 이런 색깔을 곱하여 로드하는 과정의 속도가 많이 걸리지 않느냐는 얘기를 하실 수도 있는데 실제로 아이폰4로 테스트 해 본 결과 사용자가 느낄 정도의 속도저하는 발생하지 않았습니다. 아무리 이미지가 커봤자 아이콘이 80x80보다 크진 않았고 한 화면에 보여주는 개수도 5개를 넘지 않았기 때문이었습니다. 보통 알고리즘에서 보듯이 1억 회의 연산을 1초로 본다면 1ms의 시간도 안 걸린다는 계산이 나옵니다. - 그리고 한가지 작업을 더 했는데요
- 블러 이미지를 리소스에서 제외시키고 런타임 시에 만들어내도록 작업하였습니다. 그리고 원본 이미지도 PNG가 아닌 JPG로 저장하여 용량도 최소화하였습니다. 하지만 이 이미지는 아까처럼 아이콘이 아니었으므로 블러 처리를 하는 시간이 상당히 많이 소모됩니다. 예전에 테스트를 해보니 한 5초 정도의 시간이 걸리더라고요. 그래서 이 문제를 해결하기 위해, 날씨 정보를 얻어오는 과정 동안 기본 이미지를 보여주다. 로드가 되면 Thread에서 이미지를 블러처리하고 Fade되며 이미지로 전환되도록 작업하였습니다.
- 이렇게 만들어진 Alarmy의 구조는 다음과 같습니다. 크게 뷰/모델/매니저로 나누어지고 매니저에서는 알람과 히스토리, 테마와 관련된 실제적인 처리를 담당합니다. 뷰 컨트롤러는 화면에 보여주는 뷰들에 대한 처리를 담당하므로, 매니저에 접근하도록 했습니다. 그리고 ThemeManager을 보면 뷰를 접근하는 것을 알 수 있는데 이는 뷰 컨트롤러에서 테마와 관련된 작업을 수행할 수 있도록 테마 매니저에 뷰를 등록하여 테마가 바뀔 시 자동으로 처리할 수 있도록 하였기 때문입니다. 마지막으로 모델은 매니저와 뷰 컨트롤러에서 접근할 수 있는 실제 데이터를 관리하는 부분인데요. Alarm은 알람 하나 하나에 대한 정보를 관리하고 History는 히스토리 하나 하나에 대한 정보를 관리하고 매니저에서 만든 위의 정보를 가지고 뷰 컨트롤러에서 뷰를 생성하는 과정을 거칩니다. 그리고 보면 WeatherPicture이라는 부분이 있는데 이 부분은 파일로 가지고 있는 날씨 이미지에 대한 JSON 정보를 읽어 UIImage로 로드하는 기능을 수행합니다. 이렇게 Circular-Dependency가 일어나지 않도록 구조화시켜 최악의 상황을 미연에 방지하였습니다. - 예전 1학기 때, 아이폰에 있는 알람을 사용한 적이 있었습니다. 그런데
- 알람들이 아침마다 안 울리더라고요. 잘 만들어졌다는 앱들도 한번 씩 안 울리거나 하더라고요. 그래서 이번에 개발을 하면서 찾아보았습니다. - 그랬더니 iOS에서는
- 알람 API를 제공하지 않는다는 것을 알게 되었습니다. - 그리고 동시에
- 백그라운드에서 앱을 살려두는 것조차 불가능하다는 것을요
- 진짜 개판이더라고요. 그래서 이 상황을 어떻게 해야할까 고민하고 다른 앱들을 사용해보았습니다. 그러다 좋은 방법을 알게 되었습니다. 근데 이 방법은 말씀드리기가 어려울 것 같아요. 공공연한 비밀이거든요 그래서 힌트만 드릴께요.
- 음악 앱들은 왜 백그라운드에서 꺼지지 않고 살아있는걸까? 라는 거에요. 아무튼 이런 방법을 통해서 앱을 안 꺼지게 작업했는데 가끔씩 어쩌다 한번씩 리젝 먹어요. 음악 앱도 아닌데 왜 이렇게 만들었냐면서요 근데 애플 쪽에서도 이 방법을 가지고 크게 뭐라고 안해서 그대로 다시 올리면 통과되더라고요 운 나쁘면 한번 더 리젝 먹고요. - 그리고 애플에서 제공하지 않는 기능중에
- 날씨 API도 있어요. 애플 기본 앱도 야후웨더를 사용하더라고요. 기상청 쓰면 되지 않느냐라고 말씀하실 수도 있는데 저희 앱이 한국 뿐만이 아니라 전세계 날씨를 보여줘야하기 때문에 기상청은 못썼구요. 조사를 하다보니 - 다음과 같은 사이트를 알게 됐어요.
- 오픈 웨더 맵이라는 사이트인데요. 하루에 API 4천만 건까지 무료로 사용할 수 있고 전세계의 날씨를 사용할 수 있었습니다. 엄청나더라고요. 실제로 많은 날씨가 들어가는 앱들이 이 사이트를 사용하고 있었구요. 근데 역시 무료라고 하면 한가지 문제점이 떠오르기 마련이죠 - 바로
- 정확도 문제 말이에요. 왠만해서는 엇비슷하게 나오는데 한번씩 온도가 튀는 경향이 있더라고요. 한겨울에 32도가 될 때도 있고, 4월에 영하 -20도가 될 때도 있고.. 그래도 공짜면서 이만한 사이트가 없어서 그대로 쓰고 있습니다.. - 아무튼 날씨도 그렇고 국가별 로컬라이징을 위해 다양한 노력을 했는데요.
- 그렇게 개발을 하다보니 이런 경우도 있더라고요 기본 언어와 시간 관련 언어가 다르다는 것이요. 보통 앱을 만들면 기본적으로 번들을 통해 기본 언어에 맞는 언어가 선택되는데 그런 언어 스트링 파일에 시간와 관련된 정보를 입력해두었으면 시간 관련 언어와 달라 문자열이 다르게 보여질 때가 존재했습니다. 그래도 해결할 방법이 있었고 NSFormatter에서는 시간 관련 언어 설정을 다음과 같은 코드로 받아올 수 있었습니다. 그래서 이런 시간과 관련된 문자열은 무조건 NSFormatter에서 제공하는 방법을 사용하기로 했습니다. - 그리고 NSFormatter에서는 시간과 관련된 문자열도 제공했습니다.
- 이렇게 따로 번역할 필요가 없어지는 것이었죠. 그래서 왠만한 문자열은 이 방법을 통해 해결했습니다. 알람은 지원 안하더라도 이런 문자열이라도 지원해줘서 참 감사하더라고요. 아 뭐 그렇다고요. - 그리고 날씨와 같은 아이콘을 보여주기 위해서 아이콘 폰트를 사용했는데요
- 암호화 되지 않은 아이콘폰트는 자동으로 로드가 되지 않습니다. 이 것과 관련된 정보는 위의 주소에서 볼 수 있구요. 동적으로 런타임에 폰트를 직접 로드해야 했습니다. 그렇다고 동적으로 로드한다고 모든 폰트가 로드되는 것이 아니라 당연한거지만요. 폰트 자체에 문제가 있는 경우에는 로드가 되지 않습니다. - 그렇게 개발을 마치고 세부적인 부분을 작업하기 시작했습니다.
- 먼저 아이콘을 새로운 디자인에 맞게 새로 만들었습니다. 맨 왼쪽에 있는 아이콘이 예전에 아웃소싱으로 만들어져 있던 아이콘인데, 지금의 디자인과는 조금 안 맞는 디자인이었습니다. 그래서 아이콘을 작업하기 시작했습니다. 극한의 심플도 해보고, 스큐어모피즘으로도 해보고, 다양한 도전을 해보다, 맨 오른쪽에 있는 아이콘으로 결정하였습니다. 그렇게 아이콘이 만들어지고 - 이제 실제로 마케팅을 위한 이미지를 작업했습니다.
- 광고이미지부터 시작해서요. 이 광고들은 페이스북에 올라갈 것을 생각하며 디자인했습니다. 도발적인 멘트를 포함한 광고나 단지 할인만을 소개하는 광고 등등 다양한 방법으로요. - 그리고 앱을 다운받기 전에 바로 보게 되는 프리뷰 이미지도 작업했습니다.
- 특히 이 작업을 할 때가 가장 힘들었는데 왜냐하면 전세계에서 사용되는 언어가 약 15개정도 되는데 그 언어에 맞게 모두 5장씩 스크린샷 찍고, 돋보기효과도 추가했고요. 언어에 맞게 번역 텍스트를 입력하는데 언어에 맞는 느낌을 살리는 폰트를 사용해야하잖아요 가운데 있는 일본어의 “사운드” 부분 텍스트를 보면 귀여운 느낌을 가지고 있고, 위의 “아이팟 음악 알람 ”부분은 세련된 느낌으로 살렸고, 맨 오른쪽의 중국어의 “흔들어서 알람해제“ 부분은 귀엽지만 위의 텍스트는 고급스러운 느낌으로 어디 무협영화에 나올 스타일로 작업한 것처럼요. 다시는 이런거 하고 싶지 않더라고요… - 그렇게 이런 저런 노력을 들여
- Alarmy가 탄생했습니다. 그렇게 모든게 끝난줄 알았습니다. - 애플에서는 매년 개발자들에게
- 한번의 긴급 검수라는 기회를 주는 것을 알고 계셨나요? 업데이트를 쳤는데 실수로 심각한 버그를 해결하지 못해 애플이 검수기간이 보통 일주일정도기 때문에 모든 사용자가 떠나갈 상황일 때, 사용하면 좋은 기능인데 이 기능을 사용하면 약 이틀 만에 검수가 완료됩니다. - 그래서 이 기능을 이용하자고 생각해
- 마케팅 업체와 정한 기간과 긴급 검수 기간과 맞추어 아슬아슬한 날까지 개발하였습니다.. - 근데 애플 휴가기간이 있다는 걸 생각하지 못했고
- 검수 처리가 폭주하는 바람에 그 일정은 지켜지지 못할 상황이었습니다. - 그 상황이 얼마나 심각한 상황이었냐면
- 애플의 긴급검수 담당자에게서 미안하다는 메일도 날라올 정도였죠 실제로 마케팅은 신버전으로 해야하는데 마케팅을 포기할 수 밖에 없는 상황이었습니다. 솔찍히 이쯤되니까 모든게 허탈하고 안선생님의 ‘포기하면... 편해… 하지마…‘ 짤이 떠오르더라고요 아무튼 자포자기한 상태로 그냥 지내고 있었는데 - 마케팅 업체에서 이런 연락이 왔습니다.
- 일주일정도 마케팅 기간을 미루면 안되겠냐는 연락이요. 이때부터는 정말 하루가 한달같이 초조하게 매시간마다 검수 되었나 확인할 정도였죠. - 그러다 애플 휴가 마지막날에 검수가 통과되었는데
- 이 날이 마케팅 업체와 미뤄진 날짜였습니다. 진짜 이게 무슨 우연인가 싶기도하고, 아무튼 정말 말이 안나오는 상황이었습니다. 이날은 정말 꿀잠 잔 거같아요. 한편의 영화의 주인공이 된 느낌이었어요. 결과는 그저 그랬지만요. 감동의 쓰나미가 밀려오더라고요.
- 이렇게 딜라이트룸에서 많은 경험을 했는데 배운 게 없다면 이상한 거겠죠. - 먼저
- 하나의 별거 아닌 앱이라도 많은 고민을 거쳐 만들어진다는 것을 배웠습니다. 그 당시에는 잘 몰랐지만 이 시기를 거치고 다른 앱들을 사용하다 보면 만약 이게 아니라 저런 식으로 했으면 어땠을까를 생각해 보다보면 이 방법이 정말 좋은 방법이구나 하는 깨닳음을 얻습니다. - 그리고
- 다른 관점을 가진 사람과의 토론은 서로를 성장시킨다는 것을 배웠습니다. 사장님과 저는 어떻게 보면 바라보는 시각과 성격 또한 정 반대였는데, 그렇기 때문에 하나의 아이디어에 대해서 고민할 때 저는 사장님이 생각하지 못한 관점으로, 사장님은 제가 생각하지 못한 관점으로 아이디어를 바라봤기에 새로운 문제점을 파악할 수도 있었고 그런 관점을 생각할 수도 있다는 것을 배울 수 있었습니다. 그리고 또 위에서 아이디어를 구상할 때 다른 사람들에게 여쭤보았기 때문에 힘들었지만 이런 경험은 성장통으로 남을 수 있었습니다. - 마지막으로
- 기술이 아닌 불편함에 대해 고민할 때 좋은 앱이 탄생한다는 것을 배웠습니다. 저희는 기술자이기 때문에 기술적인 관점으로 하나의 앱을 바라보는 경우가 많은데 그런 시각의 거리에서 한걸음 물러나 불편함에 대해 고민을 하는 것만으로도 좋은 앱이 만들 수 있습니다. 그리고 불편함을 해결할 수 있는 보이지 않는 기술이 단순하다고 생각할 수 있는데.. 생각보다 어려워요. 요즘 한참 화두가 되었던, 빅데이터를 이용한 데이터마이닝 기술도 사용자들의 불편함을 해결할 수 있는 방법으로 사용되듯이 말이에요. - 지금와서 생각해보면
- 참 아쉽다는 생각을 많이합니다. 좀더 많은 경험을 쌓은 상태에서 도전했다면 훨씬 완성도 높은 앱이 되지 않았을까 하는 생각이요. - 아무튼 여기까지가 제 얘기였습니다.
- 혹시 질문이 있으신가요? - (더) 없으시면 여기서 마치겠습니다.
- 긴 시간동안 제 얘기를 들어주셔서 감사합니다. 지금까지 안정원이었습니다.