LingoStar iPhone App Design Workshop
•
3 likes•1,150 views
2011년도에 진행된 디자이너를 위한 앱 개발 과정의 일지다. 그동안 여러 교육기관들의 UI 디자이너 과정의 커리큘럼과 결과물들을 보면 대부분 현실적인 여건의 문제로 최종 결과물이 UI 목업(Mock-up, 모형)을 만드는 데에서 그쳤으며, UI 목업조차도 실제 앱으로 구현되기 어려운 부분이나 UI 가이드라인을 크게 어기는 경우를 흔히 볼 수 있었다. 모바일 환경과 애플리케이션 제작현장을 잘 알고 디자인을 한다면 목업을 만들 때에도 보다 구체적이고 현실적인 결과물이 나올 수 있을 것이지만 디자이너가 볼 수 있는 기술서적은 거의 없다. 이 책이 그 대안이 되어 앱을 만드는 디자이너들이 알아야 하는 ‘앱 개발 범위’에 대한 기준이 될 수 있을 것이다. yes24 에서 구매 가능합니다. http://www.yes24.com/24/goods/6498614?scode=032&OzSrank=2
Recommended
More Related Content
Similar to LingoStar iPhone App Design Workshop
Similar to LingoStar iPhone App Design Workshop (20)
More from 성관 윤
LingoStar iPhone App Design Workshop
- 5. 서문 ‘디자이너를 위한 앱 개발 교육 과정’을 여는 것은 내 오랜 숙원사업이었다. 2010년 KT&G의 문화컨텐츠 교육기관인 ‘상상마당’에서 연 ‘링고스타의 아이폰 앱 공작실’이 그 첫 시도였다. 그러나 매주 토요일 저녁 3시간씩 10주간 진행된 그 과정은 많은 문제점을 드러냈다. 커리큘럼이 충분히 길지 못 했고, 직장인인 수강생들은 토요일 저녁에는 지쳐 있었으며, 백그라운드도 매우 다양했다. 그 모든 핑계에 앞서 나의 커리큘럼과 설명방식이 부적절했다. 결국 수강생과 나의 귀중한 토요일 저녁을 희생한 강좌는 아무런 성과 물 없이 허겁지겁 달리기만 했고, 두번째 과정을 끝으로 폐강되어 버렸다. 2009년 초반부터 아이폰 앱 개발 강의를 해 오면서 많은 IT 교육기관에서 아이폰 앱 개발 과정을 성공적으로 열 었던 경험이 있기 때문에 디자이너와 함께 하는 과정에서도 별 다른 준비 없이 성과가 나올 수 있다고 생각한 내 자만심이 문제였다. 앞 선 실패에도 불구하고 점점 커지는 앱 개발 열풍 덕에 KIDP(한국디자인진흥원, Korea Institute of Design Promotion)에서도 디자이너를 위한 앱 개발 교육에 대한 제안이 왔다. 2010년 하반기에 시작된 ‘디지털디자 인 - 앱 디자인’과정은 120시간이라는 충분한 시간과 동기부여가 잘 되어 있는 수강생, 디자이너를 위해 새롭게 준비한 커리큘럼이 있었기 때문에 성공적으로 과정을 마칠 수 있었다. 수강생들은 4팀으로 나누어 앱 개발 프로 젝트를 했으며 모두 앱을 완성해서 앱 스토어에 등록했다. 뿐만 아니라 그 중 2개가 한국 앱 스토어 마켓에서 ‘최 신 및 주목할 만한 앱(New & Noteworthy)’에 선정되는 성과까지 낳았다. 2011년 하반기에 열린 ‘디지털디자인 - 앱 디자인’ 2기 과정에서는 1기에서 드러난 문제점을 보완해 줄 수 있 는 강의 파트너를 초빙했다. 좋은 디자인의 앱을 선보인 디자인 회사의 대표에게 디자인 강의를 맡아서 팀 프로 젝트의 디자인 완성도를 높여줄 것을 부탁했다. 개발자와 디자이너가 뭉친 강사진과 수강생들의 노력으로 5개 의 앱이 만족스럽게 만들어졌으며, 그 중 2개가 다시 한국 앱 스토어 마켓에서 ‘최신 및 주목할 만한 앱(New & Noteworthy)’에 선정되는 명예를 얻었다. 이 책은 바로 2011년도에 진행된 디자이너를 위한 앱 개발 2기 과정의 일지이다. 기록물을 만든다는 것은 앱을 만드는 과정 못지 않게 어려운 일이다. 강의 내용을 다시 정리해서 책의 형태로 만 들어 내는 것도 힘들지만 팀 프로젝트의 결과물이 만들어지는 과정을 담아내는 것은 왠만한 관심이 없으면 불 가능한 일이다. 과정이 끝난 뒤부터 정리하려고 하면 자료확보가 어렵기 때문에 수업이 열리는 첫 날부터 이 결 과물을 만들기 위한 준비를 해 왔다. 사진을 찍고, 팀 별 회의의 결과물들을 남기고, 컨설팅한 내용들도 그때 그 때 메모해 뒀다. 이미 5개의 앱이 결과물로 나온 상태에서 그 과정을 기록하는 건 무슨 의미가 있을까? 사실 과정이 끝난 뒤 6개 월 동안 내 머릿속을 가득 채운건 바로 책 출간의 필요성이었다. 다른 여러 중요한 일들을 제쳐두고 이 일에 뛰어 든 건은 이 기록물이 다른 과정들의 참조가 될 수 있다고 생각했기 때문이다. 그동안 여러 교육기관들의 UI 디자이너 과정의 커리큘럼과 결과물들을 관찰했더니 대부분 현실적인 여건의 문
- 6. 제로 최종 결과물이 UI 목업(Mock-up, 모형)을 만드는 데에서 그쳤으며 UI 목업조차도 실제 앱으로 구현되기 어려운 부분이나 UI 가이드라인을 크게 어기는 경우를 흔히 볼 수 있었다. 조금의 노력을 보태 모바일 환경과 애 플리케이션 제작현장을 잘 알고 디자인을 한다면 목업을 만들 때에도 보다 구체적이고 현실적인 결과물이 나오 지 않을까 생각했다. 그러나 디자이너가 볼 수 있는 기술서적은 너무 없기에 이 기록물이 그 대안이 되길 바란다. 이 책은 앱을 만드는 디자이너들이 알아야 하는 ‘앱 개발 범위’에 대한 내 기준이다. 디자이너가 개발 환경을 이해하는 가장 좋은 방법은 잠시 개발자가 되어보는 것이다. 몇 주 동안 개발자의 시선 으로 앱을 바라보는 체험은 여러분의 UI를 보다 ‘단단하게’ 만들어 줄 것임을 확신한다. 그리 어려운 일은 아니다. 맥과 아이폰만 있으면 얼마든지 앱 개발자로서 ‘체험 삶의 현장’을 찍을 수 있기 때문 이다. 다시 한 번 디자이너가 개발과정을 이해해야 하는 이유를 상기해 보자. 디자이너와 개발자는 서로 확연히 다른 전문분야를 가지고 있는 사람들이며 직업에 대한 프라이드도 크다. 하지만 앱 스토어가 열리면서 ‘좋은 애플리케이션’의 기준이 바뀌어서 컴퓨터 프로그램으로서의 기능적인 면에 집중하던 시기를 지나 일상생활의 도구로서 손에 감기는 듯한 편리성과 심미성이 중요시 되는 시대가 되었다. 마치 자동차가 단지 사람을 태우고 굴러가는 기계장치에서 타는 사람의 취향을 반영하는 공간이 된 것과 비슷하 다. 개발자들 역시 이 변화의 흐름에 던져졌다. 애플이 아이폰 HIG(iPhone Human Interface Guideline, 아 이폰과 인간사이의 인터페이스 가이드라인)을 발표하면서 "디자인을 무시하는 앱은 앱 스토어 올려주지 않겠어" 라고 선언했기 때문이다. 애플의 앱 스토어에서 성공하는 앱들은 대부분 이렇게 ‘UI에 관심있는 개발자’와 ‘개발에 상식이 있는 디자이너’ 가 함께 만들어 낸다. 개발자가 자기가 서 있는 자리에서 디자인에 관심을 가지고 바라보고 있고, 디자이너도 자기의 자리를 지키며 기술의 변화에 관심을 가지며 지켜볼 때 비로서 원활한 커뮤니케이션이 되고 좋은 앱이 나올 수 있기 때문이다. 최근 주변의 개발자들에게서 ‘개발자를 위한 디자인 과정’을 개설해 달라는 요청을 많이 받는다. 그건 이 책을 읽고 공부한 여러분들의 몫이다. 2012.02.29 윤성관 Special Thanks to..
- 7. Project Schedule 주차 1 2 아이디어 기획 과제 3 4 조 추첨식 5 브레인 스토밍 6 7 기획서 제출 8 기본 프로젝트 제공 9 10 UI 가이드라인 11 12 13 1차 코딩 과제 14 2차 코딩 과제 15 최종 발표 앱스토어 등록
- 8. 조별 소개 A조 I INVITE U 카테고리 : 라이프 스타일 버전 : 1.0 크기 : 9.2MB 언어 : 영어 앱 스토어 설명 : <I INVITE U> 초대장 앱은 다양한 분야의 디자이너 5명 이 모여 만든 앱으로써 4개의 카테고리(가족, 결혼, 파 티, 기타) 안에서 다양하고 재미있는 초대장을 제공한다. 스마트한 사람들을 위한 스마트한 초대장인 만큼 행사 와 목적에 맞게 자신이 직접 사진을 넣고 문자를 편집 하여 쓸 수 있으며 메일과 SNS 등에서 다양하게 활용 할 수 있다. 다양하고 이쁜 카드들과 심플하고 편한 초대장 기능을 이 용하여 다가오는 연말, 연시 행사에 자신만의 특별한 초 대장을 준비해 보는 것은 어떨까?
- 9. B조 팀명 - 라디오버튼 Toy Music 카테고리 : 교육 버전 : 1.0 크기 : 5.7MB 언어 : 영어 앱 스토어 설명 : 귀여운 악기들이 아이의 연주를 기다리고 있어요! 토이뮤 직은 악기들을 귀엽고 재미있게 의인화하여 아이들이 흥미 를 가지고 연주할 수 있는 앱입니다. 탬버린, 트라이앵글, 캐스터네츠, 마라카스 네 가지의 악기 가 있으며, 각각의 악기들은 터치시 실제 악기와 유사한 느 낌으로 연주할 수 있습니다. 탬버린과 마라카스는 흔들어 서 연주할 수도 있습니다.
- 10. C조 팀명 - 빠삐코 Dr.Pico 카테고리 : 게임 버전 : 1.1 크기 : 17.8MB 언어 : 영어 앱 스토어 설명 : 세계 정복이 꿈인 사악한 과학자 Dr.Pico로 인해 살아있 는 지구의 생명체들은 몸과 정신이 분리되는 위기에 처해 졌다. 세계를 구하기 위해 나타난 당신! 이제 Dr.Pico의 실 험실에 들어가 특별한 무기로 몸과 정신을 합성시키는 미 션을 수행해야 한다. 게임이 시작되면 보드판에 조준된 캐릭터와 같은 이미지를 찾아 터치하면 합성 성공. 이렇게 50개의 캐릭터를 빠른 시간 내에 합성시키면 Dr.Pico를 이기게 된다. 속도가 생명! 99.99초가 넘으면 당신의 패배. 세계는 Dr.Pico의 손에 넘어가게 된다.
- 11. D조 Morning page 카테고리 : 라이프 스타일 버전 : 1.0 크기 : 8.5MB 언어 : 영어 앱 스토어 설명 : 모닝페이지는 아침에 일어나자마자 무의식속에 있는 생각 을 정리하는 것입니다. 지속적으로 글을 적는 것을 습관화 하면 잠재되어 있는 창조적인 생각을 끌어낼 수 있습니다.
- 12. E조 iDressRoom 카테고리 : 라이프 스타일 버전 : 1.0 크기 : 9.2MB 언어 : 영어 앱 스토어 설명 : iDressRoom은 자신의 옷장에서 꺼내어 코디하는 것 같 은 사용자 경험을 제공하는 앱입니다. 따뜻한 감성의 원 목 아일랜드식 옷장으로 아날로그적 감수성을 일깨워 보 십시오. 사용자가 직접 자신의 옷장 이름을 설정할 수 있고 3가지 카테고리로 선정해 상의, 하의, 악세사리, 신발 등 아이템 의 사진을 올리고 코디하여 저장할 수 있습니다. 이제 아이 폰에 자신의 옷장을 넣어 관리해 보세요. 사진을 찍고 코디 하고 저장하고, 이전에 촬영했던 사진을 불러와 아이폰 속 내 옷장에 담아 두십시오. 내가 가진 옷들의 목록을 체계적 으로 보고 관리할 수 있도록 도와드립니다. - 옷장 안에 잠자고 있는 아이템들을 한 눈에 볼 수 있습니다. - 그날의 코디를 기록으로 남길 수 있습니다. - 사진 찍고 꺼내서 코디! 간편합니다. - 저장한 코디들을 리스트로 남겨 언제든 다시 꺼내볼 수 있습니다.
- 13. 28 Ice Breaking & Motivation 개발 툴 소개 File > New > New Project... 메뉴를 이용해 새로운 프로젝트를 Xcode 1 만드는 화면이다. 7가지 템플리트 중 하나를 선택해서 시작할 수 있도록 했다. 템플리트는 앱 제작의 시작점이다. 특성에 맞게 기 본적으로 필요한 내용을 미리 입력해 놓아 시작할 때 번거로움을 덜어주기 위한 것이다. 간단히 설명하면 다음과 같다. Xcode는 아이폰 앱 개발을 위한 툴이다. 대부분의 아이폰 앱 개발 Master-Detail Application 자는 Xcode를 이용해 개발을 진행한다. 이러한 프로그램 개발 도 업무용 애플리케이션의 전형적인 구조를 가진다. 구를 IDE(통합 개발 환경, Integrated Development Environ- 아이폰의 경우 목록 테이블 뷰가 있고 그 중 한 항목 ment)라고 한다. 말 그대로 개발을 위해 통합된 환경을 제공하는 을 선택하면 자세한 뷰가 밀고 들어오는 방식의 뷰 구조이며, 아 프로그램이다. Xcode에서 오브젝티브-C (Objective-C) 언어를 이패드의 경우 좌우로 분할된 화면에 왼쪽에는 목록이 있고 오른 이용해 코딩을 하고, 그림이나 음악과 같은 리소스를 관리하고, 인 쪽에는 자세한 내용이 보이는 뷰 구조를 제공한다. 터페이스 요소의 설계를 하기도 한다. Xcode를 실행해 보면 낯선 용어와 방대한 기능에 주눅이 들 수 OpenGL Game 도 있다. 2D/3D 그래픽스 표준 API인 OpenGL을 이용해서 하지만 UI 디자이너에게 있어서 Xcode는 두렵지만 외면할 수 없 게임을 만들 수 있도록 준비된 템플리트이다. 는 존재이다. 앱의 UI를 디자인하는 경우 결국 완성품은 Xcode 를 통해 만들어진다. 내가 만든 UI는 Xcode를 통해 코드와 합쳐 Page-Based Application 져야만 의미가 있는 것이므로 기본적으로 Xcode에서 구현 가능 앱 형태의 책이나 사진집, 카탈로그 등을 만들 수 한 디자인을 해야 한다. 있도록 여러 장의 페이지를 넘길 수 있는 뷰 구조 물론 코딩을 깊이 있게 익히는 것은 많은 시간과 노력을 필요로 하 를 제공한다. 기 때문에 차근차근 장기적인 관점에서 접근해야 한다. 우리는 오 늘 Xcode 와 첫 만남을 가지고 간단한 인터페이스에 대한 설명, Single View Application 그리고 아이폰 SDK (소프트웨어 개발 키트, Software Devel- 기본 뷰 하나가 제공되는 템플리트로서 우리가 자주 opment Kit)에서 기본적으로 제공하는 UI 요소들을 익혀보겠다. 사용하게 될 템플리트이다. 가장 쉽고 빠르게 디자 Xcode는 애플의 개발자 사이트 (http://developer.apple.com) 인 결과를 볼 수 있다. 에 무료 회원가입을 통해 다운로드 받거나, Mac AppStore에서 다운로드 받을 수 있다. 개발자 사이트에서 iPhoneSDK의 최신 Tabbed Application 버전을 받으면 Xcode와 함께 iPhone 앱 개발용 프레임워크까 화면 아래쪽에 탭을 가지는 형태의 애플리케이션의 지 함께 설치할 수 있다. Xcode의 설치위치는 하드디스크 아래의 뷰 구조를 제공한다. 탭을 가지는 애플리케이션들은 /Developer/Applications/ 폴더이다. Xcode를 실행해 보자. 다른 앱 들에 비해 규모가 크다.
- 14. 최경모 대표 첫 인사 원래 난 고등학교를 졸업하고 전자공학과에 입학을 했다. 1학년을 다니면 서 포트란도 배워보고 알고리즘이란 것도 수업을 들었다. 그러다가 디자 인이 하고 싶어서 시험을 다시 쳐서 디자인과에 다시 진학을 했다. 이 이 야기를 하는 이유는 내가 다른 디자이너에 비해 공학적인 관심이 있는 디 자이너라는 것을 말하고 싶어서다. 처음 아이폰 앱 시장이 열렸을 때 난 내가 직접 개발을 할 수 있을꺼라 생 각했다. 어려운 건 아니더라도 간단한 계산기 정도는 할 수 있을 것 같았 다. 하지만 실제로 해 보니 한 두가지 문제가 발생하는 게 아니더라. 굉장 히 전반적인 걸 알아야 완성품을 낼 수 있다는 것을 깨달았다. 우리의 한계 우리는 디자이너이다. 개발자가 되기는 매우 어려우며 이번 과정은 그 길 을 알려주는 게 목표가 아니다. 디자이너라는 발판을 딛고 선 상태에서 앱 에 대한 공부를 하는 것이다. 그러므로 우리가 이번 과정의 실습목표로 삼 을 수 있는 앱은 그 한계가 명확하다. 앞서 말한 것처럼 나는 공학적인 관심이 있는 디자이너이다. 디자이너로 오래 작업하다 보니 지금은 생각하는 방식이 디자이너적이다. 디자이너와 코더는 다른 방식의 접근을 한다. 우리가 앱을 개발해 보는 과정이지만 직접 아이폰 앱을 개발하는 것은 쉽 지 않은 일이다. 먼저 시도해봤던 디자이너로서 판단하건데, 간단한 앱 개 발을 위해서도 많은 기반지식이 필요하다. 흔히 보는 학원의 홍보문구처럼 '디자이너 앱 개발 15주 완성' 같은 코스 가 아님을 먼저 설명 드린다. 우리가 이 과정 내에서 앱의 완성품을 만들 수는 없다. 목업을 만들고 파일럿 프로젝트를 띄우는 수준이 될 것이다. 우리가 해볼 만한 앱들을 살펴보자.
- 15. 2주차 07.02 37 GPS Photorino 처음 내가 앱을 만들 때는 남들과 다른 UI를 만들기 위해 이미지를 사용하는 데 집착했었다. 아이폰은 서 체도 극히 제한적으로 지원했으므로 원하는 느낌의 화면을 얻어내기 위해서는 어쩔 수 없는 것이라 생 각했다. 하지만 두가지 상황이 닥치면서 이 생각이 많이 바뀌었다. 첫번째로, 아이폰이 레티나 디스플레 이를 달고 나온 것이다. 모든 이미지 리소스들을 두 가지 종류별로 만들어야 하는 게 너무 귀찮았다. 두 번째로 다국어로 로컬라이즈를 시작하면서이다. 각 언어별로 이미지를 다르게 만들어주는 건 여간 귀찮 은 일이 아니었다. 그래서 디자인의 방향을 바꿨다. 가능한 아이폰의 기본요소들을 활용하면서 커스터마이즈된 UI 디자인 을 해 보기로 했고, 지금은 오히려 예전보다 나은 디자인이 나왔다. 기본 서체를 이용하다보니 레티나 디스플레이에 자동으로 대응이 되었으며, 원하는 언어로 로컬라이즈하 는 것도 개발자와 디자이너의 손을 거치지 않고도 완료할 수 있게 되었다. iPhone의 기본 요소를 잘 활용하는 디자이너들을 개발자가 선호할 것이다. 큰 차이를 만드는 게 아니라 면 아이폰의 기본요소를 활용해서 만들자. 1to50 1to50 는 매우 인기가 좋은 앱이다. 많은 사람들이 1to50를 한 다. 게임 방식은 아주 단순하다. 1부터 50까지 연속된 숫자를 빨 리 찾아 누르는 것이다. 게임은 앱스토어에서 가장 Hot한 카테고리이지만 경쟁이 치열하 다. 하지만 아주 간단한 게임이라도 충분히 게임성을 가지고 성공 할 수 있다. 디자이너의 능력치를 최대한 발휘할 수 있는 장르라 고 생각한다. 1to50와 똑같은 게임을 만드는 것은 좋지 않지만 차별성을 두면 충분히 재미있는 게임이 나올 수 있다. 특히 앱 개발을 처음 배우는 입장에서는 추종전략을 쓰는 것도 나 쁘지 않다.
- 16. 3주차 07.09 49 ios SDK 3.0 History - iOS 3.0 History - iOS 3.0 iPhoneSDK 3.0 APNS •2009년 3월 •Apple Push Notification Service •굵직한 기능 추가 •멀티테스킹의 시작 •비지니스 모델 추가 •자체 서버 + Apple Push Server •APNS, StoreKit, GameKit, AVFoundation, MapKit, Core Data 2009년 3월에 iOS 3.0을 발표하면서 iOS SDK 3.0을 제공했다. 먼저 보안을 이유로 들 수 있다. 백그라운드 프로세스를 허용하지 않는 것 2.0 버전이 아이폰의 기본적인 기능에 대한 SDK 제공이었다면, 3.0부터 은 앞서 설명한 Sandbox와 함께 아이폰을 악성 프로그램으로부터 안전 는 본격적으로 아이폰을 기반으로 한 여러 가지 새로운 시도가 시작되는 하게 지키는 데 큰 역할을 한다. 두 번째 이유 모바일 장치는 항상 자원 시기라 할 수 있다. 이 부족하다 는 것이다. CPU의 성능도 떨어지고 메모리도 부족하며 무엇보다 배터리 APNS 용량이 매우 제한적이다. 이런 상황에서 사용자가 모르게 어떤 프로그램 이 백그라운드에서 돌아가면서 배터리를 엄청나게 소 모하는 작업을 한다면, 사용자는 아이폰에 대해 안 좋 은 사용 경험을 가질 수 있다. 이런 경우, 사용자는 특 정 앱을 비난하는 게 아니라 애플의 아이폰을 비난하 게 된다. 애플은 사실 플랫폼을 제공하는 회사로서 자 기의 책무를 성실히 수행하고 있다고 봐야 한다. 엔지 니어가 아닌 일반 사용자라면 자기 폰에 어떤 프로세 스 때문에 배터리를 많이 소모하는지 직접 확인하고 감시하고 삭제하는 수고를 하려 하지 않는다. 하지만 여기에 애플의 딜레마가 있다. 환경은 안전 하고 깨끗하게 지켜지지만 앱의 기능이 약해지는 것 이다. 이 문제에 대한 애플의 첫 번째 해결책이 바로 APNS이다. 백그라운드 프로세스가 필요한 대표적인 작업은 네트 워크로부터 데이터를 수신 받는 것이다. 새로운 공지 대표적인 것으로 APNS(Apple Push Notification Service)가 있다. 사항이 있을 때, 누군가가 나에게 메시지를 보냈을 때, 내가 입찰한 경매 APNS를 보면 애플이 모바일 환경에 접근하는 방식에 대해 이해할 수 있 에 낙찰되었을 때 각각의 내용을 통지받기 위해 네트워크에 소켓을 열어 다. 아이폰에 대해 이해하는데 필수적인 기술이다. 앞서 아이폰이 Unix 기 놓고 듣고 있는 것이다. 이 작업은 백그라운드에서 주기적으로 이뤄지며 반이라고 말한 적이 있다. Unix를 기반으로 하기 때문에 백그라운드에서 크게 부하를 주는 일은 아니다. 하지만 이런 백그라운드 프로그램이 100 프로그램을 마음껏 돌릴 수 있을 꺼라 생각할 수 있지만, Mac에서는 가능 개가 되면 어떨까? 100개의 백그라운드 프로그램이 각각 네트워크로부 할지 몰라도 아이폰에서는 불가능하다. 아이폰은 기본적으로 애플리케이 터 수신되는 정보가 있는지를 1초에 한 번씩 계속 체크한다면 만만치 않 션이 백그라운드에서 동작하지 못하도록 설계되어 있다. 데몬(daemon) 은 작업 부하가 걸릴 것이고, 메모리를 차지할 것이며, 배터리를 소모하게 이나 에이전트(agent)같은 UI가 없는 백그라운드 프로세스의 경우도 애 될 것이다. 이것을 하나로 통합하는 것이 APNS 이다. 플이 직접 만들거나 관리하는 것이 아니면 설치가 불가능하다. 왜 이렇게 그림처럼 내가 '한결신문'의 앱을 설치한다면, 앱은 시동과 함께 사용자 제약을 뒀을까? 에게 푸시 통지를 받을 것인지를 묻는다. 내가 OK를 하면 내 아이폰의
- 17. 68 프레임 워크 조 추첨식 조를 구성하는 것은 매우 중요한 일이다. 조원 한 명의 영향으로 프로젝트가 성공할 수도 또는 실패할 수도 있기 때문이다. 그래서 우리는 수강생들의 의사를 먼저 물어봤다. 혹시 꼭 함께 하고 싶은 사람이 있다거나 반대로 함께 하고 싶지 않은 사람이 있으면 개인적으로 알려달라고 공지하였다. (물론 없었다) 임의로 조를 선정할 수도 있지만, 그러기에는 강사들도 수강생에 대해 아는 것이 없었다. 섣불리 임의로 조를 짜 주는 것 보다는 수강생들이 수긍할 수 있는 방식을 택하는 게 중요하다 생각했다. 그래서 조 추첨식을 했다. 먼저 사람을 고르게 분산하기 위해 과제물을 제출한 사람을 탑 시드에 배치 했다. 그리고 추첨! 그 과정을 모두 진지(?)하게 지켜보았다.
- 18. 5주차 07.23 79 D조 아이디어 회의 D조는 생각해 낸 아이디어들이 모두 구현이 어려워서 아이디어 회의에서 고심을 많이 했다. 기획 발표
- 19. 것은 아니다. 부모보다 못한 자식을 빈번히 볼 수 있지 않나? 하지만 코 UIView의 서브클래스들은 UIView로부터 ‘화면에 표시하는’속성을 이 딩의 세계에서 상속은 완벽하게 일어난다. 부모 클래스의 모든 프라퍼티 어받은 뒤 제각각 특화시킨다. UILabel은 ‘문자열을 표시하는’ 뷰 클래 와 메소드를 자식클래스가 이어받은 뒤 필요한 기능을 확장한다. 그러 스이며, UIImageView는 ‘그림을 표시하는’ 뷰 클래스이다. UIScroll- 므로 대부분의 경우 자식클래스는 부모클래스보다 많은 기능을 가진다. View는 ‘좁은 화면에 큰 콘텐츠를 표시하기 위한’ 뷰 클래스 인 것이다. 뷰 클래스의 계층도를 보면 보다 명확히 알 수 있을 것이다. 이 그림은 뷰를 중심으로 한 클래스의 상속 계층도이다. 기본적인 화면 UIView의 서브클래스 중 하나인 UIControl 역시 하나의 일가를 이루 표시를 위한 클래스들을 모아놓은 것이기 때문에 모두 UIKit 프레임워 는 클래스이다. UIControl은 ‘화면에 표시’하는 UIView의 속성을 이어 크의 클래스들이다. 코코아터치(그중 특히 UIKit)에 익숙한 개발자라면 받은 뒤, ‘터치 이벤트 발생시 액션 메소드 호출’이라는 기능을 추가했 이 정도 계층도는 눈 감고도 그릴 수 있다. 다. UIControl이 확장한 그 능력 덕분에 UIControl을 서브클래스하는 버튼, 슬라이더, 스위치 등의 클래스들은 별로 수고를 들이지 않고도 사 먼저, UIView는 모든 화면 표시의 시작점이다. 화면에 표시되는 모든 용자가 버튼에 손가락으로 누르거나 떼는 순간 액션 메소드를 발생시킬 오브젝트는 UIView로부터 속성을 이어받은 UIView의 자식 클래스들 수 있으며, 슬라이더의 값을 바꾸었을 때 손쉽게 액션 메소드를 호출해 이라는 것을 알아두자. 이벤트에 대응할 수 있다. 그런데 그 UIView 또한 UIResponder의 자식임을 알 수 있다. 그리 다시 한번 살펴보면, 우리가 만든 UIImageView의 오브젝트인 can- 고 UIResponder는 NSObject의 자식이다. 그럼 NSObject의 부모 dleImageView는 기본적으로 오브젝트가 메모리에 생성되고 소멸되는 는 누굴까? 등의 기본적인 속성은 먼 조상인 NSObject로부터 받아왔으며, UIRe- 없다. sponder의 손자인 셈이기 때문에 사용자의 이벤트에 반응할 수도 있 다. 화면에 뿌려지기 위해서는 UIView로부터 이어받은 속성을 이용하 며, UIImageView에 와서 image라는 속성을 확장해서 UIImage 오브젝트를 받아 화면에 뿌려줄 것이다. 뿌리가 되는 NSObject는 물론이고, 화면 표시의 최상위 클래스인 UIView와 같은 클래스의 경우 UIKit 프레임워 크 내에서만이 아니라 모든 화면표시가 필요한 프레임워 크에서 사용하는 클래스이다. 즉, MapKit 프레임워크의 MKMapView 클래스의 경우, UIView 의 서브클래스이 다. 즉, MapKit은 UIKit에 디펜던시(dependency, 의 존성)가 있다. 우리가 직접 만드는 클래스들도 애플의 API에 있는 클래 NSObject라는 클래스가 바로 시작점이며 모든 클래스들의 조상 역할 스 중 적당한 클래스를 서브클래스해서 만들게 된다. 이 경우 어떤 클 을 한다. 그래서 NSObject 클래스를 루트(Root, 뿌리) 클래스라고 한 래스는 서브클래스를 만들 때 특별한 주의사항이 있는 경우도 있으므 다. 우리가 아이폰 앱을 만들면서 사용하는 모든 클래스들의 오브젝트 로 주의하자. 들은 NSObject로부터 상속된 클래스이므로 속성과 기능도 이어받았 다. 즉, NSObject는 가장 기본적인 속성과 기능을 가진 클래스이며, 모 이제 프로그래밍의 세계에 조금씩 눈이 뜨이는가? 든 클래스들이 그 속성을 다 가지고 있기 때문에 매우 중요한 클래스라 이렇게 체계적으로 쌓아 올린 위에서 우리는 비교적 간편하게 앱을 만 고 할 수 있다. 들게 되어 있다. 이 연관 구조를 얼마나 잘 파악하고 활용하느냐가 개발 자에게 중요한 소양이다. UIResponder는 NSObject를 상속한 뒤 거기에 이벤트 처리 기능을 확장했다. 그러므로 UIResponder를 상속하는 모든 클래스들은 이벤 여러분들도 이 시간만큼은 OOP에 대해 충분히 고민해 보고, 다른 여러 트를 처리하는 능력을 가지게 된다. UIView 역시 UIResponder를 상 OOP관련 서적의 입문 파트를 훑어보기 바란다. 여러분들은 개발자 체 속하므로 ‘화면에 보이는 모든 오브젝트들은 사용자의 이벤트도 처리할 험을 하는 중이니까. 수 있는 준비가 되어있다’는 명제는 성립한다.
- 20. 7주차 08.06 99 Toy Music 기획서 발표 저희 앱 이름은 아직은 가칭인데 toy music이 어떨까 한다. 인트로 페이지에서 화면을 터치해 실행을 시키면 네 개의 악기중 하나를 선택할 수 있다. 하나의 악기를 선택하면 악기를 연주할 수 있는 버튼이 나 온다. 스크롤 뷰에 스킨이 있으며, 원하는 스킨을 적용할 수 있다. 기본적으로 여기까지 구상을 해 봤다. 간단한 그림과 함께 다시 정리를 해보자면, 앱 실행 후 인트로 로고 페이 지 나오고 터치시 타이틀 바에 앱 이름이 적혀있는 악기 선택 화면이 나온 다.연주 화면에서는 터치시 리액션에 대한 아이디어와 여러 가지 다양한 콘셉트의 캐릭터 스킨을 고민해 보려한다. 강사 Comment 캐릭터 귀엽다. 잘 나온 것 같다. 이 부분은 고민해 볼 필요가 있는 것 같다. 타이틀 화면을 처음에 넣어야 할까? 필요한 존재인가? 불필요한 것들은 가급적 걷어내는게 중요하다. 최대한 걷어내고 집중할 수 있는 것에 최대한 집중하자. 인포페이지를 봤는데, 이 화면을 위한 버튼을 만들기가 디자인하는 사람 입장에서는 거추장스러울 수 있다. 제 생각에 그냥 단순한 정보만 있는 것 이라면 스태프 이름 나오는 곳에 한 단계를 더 넣어버리면 좀 덜 거추장스 럽지 않을까 하는 생각을 한다. 하지만 이 부분은 제가 결정할 수 있는 사항이 아니라서 그 부분에 있어서 는 협의가 좀 필요한 것 같다.
- 21. 7주차 08.06 107 Morning Page 기획서 발표 저희는 초반에 기획하면서 생긴 욕심을 다 버렸다. 디자인은 아직 진행 중이라 이전에 있었 던 페이지들로 말씀을 드리겠다. 1 모닝페이지는 아직 정신이 깨어나지 않은 상태에서 의식의 흐름을 써 내려가는 것이다. 2 타깃은 글쓰기와 명상을 통해서 창의력을 이끌고 싶은 스마트 폰 유저이다. 3 전략은 아침에 의식이 활성화되기 전에 내 안에 있는 잠재된 내용들을 풀어나가자. 그래서 마음에 담아둔 생각들을 끄집어내고 스트레스도 해소할 수 있도록 한다. 4 메인에는 글을 적는 영역과 다시 보기가 있다. 기본 스킨이미지는 제공을 하고 사용자가 직 접 추가하는 기능을 넣을 생각이다. 뮤직은 배경음악과 키보드 타이핑시 들어가는 음악이 있 는데 배경음악도 직접 추가하는 부분을 또 넣을 것이다. 서체는 2~3가지 서체 패밀리를 제공 하려 한다. 기억을 위해 작성해서 저장하는 내용보다 사적인 내용들이 많을 것 같아서 패스워 드 설정을 할 수 있어야 한다. 5 내비게이션은 간단하다. 기록을 하면 자동으로 바로 저장이 되고, 예전에 쓴 글을 볼 수 있 는 페이지가 있고, 설정페이지로 들어가는 것까지이다. 가능한 첫 화면에서 기본적인 것은 다 확인할 수 있도록 할 것이다. 인트로 화면 이후의 첫 화면은 기본적인 폰트와 이미지가 펼쳐 진 화면에서 하단에 키보드가 있어서 입력이 가능한 화면이다. 6 저희의 특징은 키보드를 디자인한다. 왼쪽이 기본 키보드이고 우측이 키보드가 뒤집어졌을 때 설정창이다. 키보드 상단에 보면 리스트 버튼과 세팅버튼이 있다. 세팅버튼을 클릭하면 키 보드가 뒤집어지면서 이미지, 배경음악, 서체 등을 설정하는 키보드가 나온다. 저희가 이렇게 아래쪽 공간만 이용한 이유는 설정한 이미지나 서체 등을 바로바로 확인할 수 있도록 하는 게 사용자의 답답함을 줄일 수 있다고 생각하기 때문이다. 또 리스트 버튼을 클 릭했을 때 지난 글의 리스트가 나온다. 앞으로 회의하면서 추가되는 작업이 있을지 모르겠지만 계속 다듬어가고 조금 더 깊이 있게 작업을 해 나갈 것이다.
- 22. 126 뷰와 뷰 컨트롤러 Dr.Pico 게임에 대한 배경을 설명하는 첫 화면은 자동으로 스 크롤 되도록 한다. 제일 아래로 스크롤 하면 게임의 메 뉴가 나온다. 혼자 하는 게임과 임무부여, 블루투스를 이용한 대전 과 랭킹 기능이 기획되었으나, 이 중 블루투스를 이용 한 대전은 첫 번째 버전에서는 불가능하므로 배제한 다. 1차 목표가 완수된 후 고려할 사항이다. 실제 아이폰에서 시안을 실행해보면 아이콘들의 크기 와 배열 방식에 대해 명확히 느낌이 올 것이다. 강사와 함께 만든 프로젝트
- 23. 146 UI 사례 분석 TweetMusic-UI / 2009 10 08 / 12nd Edition Tips #1 Tips #1 > Dialogue Branding Design Group, imagebakery 이미지베이커리 | 121-840 서울시 마포구 서교동 395-134 준영빌딩 2층 | T 02 332 0264 | F 02 332 0265 | imagebakery.tv Tips 페이지도 지금은 빠져있다. 설명이 필요 없게 만들어야 된다는 생각 때문이다. 2 상단에 보이는 'Do not show Tips'같은 이런 창도 데스크톱 애플리케이션의 방식이라는 생각을 한다. TweetMusic-UI / 2009 10 08 / 12nd Edition SENDED SENDED Tweet Song > Playing Tweet Song > Pause Branding Design Group, imagebakery 이미지베이커리 | 121-840 서울시 마포구 서교동 395-134 준영빌딩 2층 | T 02 332 0264 | F 02 332 0265 | imagebakery.tv 중요한 버튼인 ‘TWEET THIS SONG’은 쉬운 위치에 크게 만들었다. 그 외에도 눌러야 하는 버튼들은 기 3 본적으로 손가락 크기만큼 키워놨다. 기본 제공되는 탭 바와의 차별화를 위해 탭바를 커스터마이즈 했다. 탭바 아이템 선택영역의 색상을 앱의 아이덴티티를 살릴 수 있는 색상으로 바꾸고, 선택한 아이템이 바뀔 때 선택영역이 움직이듯이 애니메이션 을 하고 싶었다. 탭 바 아이템 중 가장 왼쪽에 있는 버튼은 리젝트의 좋은 사례다. 1.0에서는 통과해서 앱 스토어에 정상적으로 올라 갔다. 1.1에서 리젝을 먹었다. 맥에 있는 아이챗 애플리케이션과 유사하게 생겼다고 몇 번이나 리젝트를 해 속이 타 게 했다.
- 24. 194 애니메이션 도큐멘트 아웃라인 버튼 리소스들을 모두 프로젝트에 복사하면서 더한 뒤 LSViewCon- 2 troller.xib 에 그림과 같이 뷰를 구성하자. 유틸리티 패널의 아래 쪽 패널의 4번째 '미디어 라이브러리' 탭에는 프로젝트에 추가한 리소스들이 보인다. 바로 드래그 앤 드랍하면 이미지 뷰가 만들 어진다. 헬리콥터 이미지의 경우 크기가 크기 때문에 이미지 뷰의 사이즈 를 적당히 조절하고 '애트리뷰트(Attribute)' 탭에서 Mode를 Aspect Fit 으로 지정한다. Aspect Fit은 이미지의 종횡비를 유지하면서 이미지 뷰 의 크기에 맞춰 이미지 크기를 바꾸는 옵션이다. 배경과 헬리콥터를 드래그 앱 드랍하는 순서에 따라 헬리콥터가 배경 아 래로 깔려버릴 수도 있다. '도큐멘트 아웃라인 버튼'을 이용해 뷰 오브젝트 의 레이아웃 순서가 보이도록 한 뒤, 순서를 바꿔주자. 그림과 같이 이미지 뷰에는 helicopterImageView라는 아울렛 3 을 붙이고, toggleFly와 moveThroughPath라는 이름의 액션 메소드를 각 버튼에 연결한다. 이제 이미지 뷰 애니메이션을 준비해 보자.
- 25. 210 디자인 마무리 Dr.Pico 선택과 변환 Effect
- 26. 13주차 09.24 221 Toy Music 강사 코멘트 오디오 재생 방식은 가장 간단한 SystemSound로 조의 코더가 결정했다. 가 장 쉽지만 제공하는 기능은 적기 때문에 확장에는 문제가 있을 것을 염두에 두어야 한다.사운드가 메모리에 미리 올라가 있지 않기 때문에 탬버린을 처음 칠 때 반응이 느린 감이 있다. 정공법으로 해결하려면 많은 시간과 노력이 들 어가므로, 처음 앱이 사동할 때 인트로 음악처럼 모든 타악기들이 소리를 한 번 내는 것도 좋을 듯. 탬버린이나 마다가스의 경우 Shake에도 반응할 수 있으면 좋겠다. 스킨변경 기능은 포기하는게 어떨까? 스킨 변경 기능을 넣으려면 해야 할 일이 너무 많다. 대신 UI 목업으로는 스킨 변경을 완성해 보길 바란다. 지금은 완성도를 높일 때이므로 기본 기능에 집중하자.
- 27. 250 코딩 Burn #2 Dr.Pico 동작 방식 엿보기 코딩을 맡은 조원은 보드의 아이콘과 제시 된 아이콘이 동일한 지 1 검사하는 로직을 만든다. awake는 NO인 상태로 80개의 Cast 오브젝트를 만든다. 80개의 아이콘 Cast BOOL Cast Iwt Cast UIImage CastImage UIImage CastIDeadmage ...... 80개의 아이콘 중 25개를 골라 보드에 타일링 한다. 2
- 28. 15주차 _ 2011.10.08 담당 | 윤성관, 최경모 앱스토어 등록 오늘은 마지막 수업이 있는 날이다. 디자인과 코딩을 함께 마무리 해야 해서 윤성관 강사와 최경 모 강사 모두 6시간 동안 함께 했다. 지난 주 강의시간에 낸 마지막 과제에 대해 지난 수요일에 오영택 조교가 조별 과제 점검을 하고 코딩에 대한 마지막 힌트를 줬다. 오늘은 그 마무리를 짓고 앱 스토어에 앱을 등록해야 한다. 최경모 강사는 앱스토어에 올리기 위한 앱의 설명, 키워드, 아이콘, 스크린 샷 등의 점검을 맡고 윤성관 강사는 조별 진도 파악 후 오영택 조교와 함께 기능 정리에 들어갔다. 마지막까지 노력을 했으나 구현이 되지 않은 부분은 강사가 직접 구현해 주거나 아예 기능에 대 한 UI를 제외했다. 앱스토어에 정상적으로 등록되어서 Ready for review 상태로 들어간 것을 확인한 뒤 각 조별 최종 발표를 했다.