https://goo.gl/FfHY89

1. 어플리케이션 및 웹 개발
Leonardo Taehwan Kim

2. 간략한 소개
● 서울과학고등학교, KAIST 전산학과 졸업
● 300만 다운로드 어플리케이션 제작
● Vingle 안드로이드 개발자
● BTTENDANCE 스타트업 창업
● 외 수많은 모바일 어플리케이션 및 웹 개발

3. 목차
1. 어플리케이션과 웹사이트 개발을 위한 툴
2. 각 툴을 이용한 앱 및 웹 개발 과정
3. 외주를 통한 앱 및 웹 개발 과정
4. 해외 프리렌서 개발자 구인
5. 간략한 웹사이트 랜딩 페이지 제작

4. Tools

5. TOOLs

6. 왜 적절한 툴을 사용하는 것이 중요한
가?
● 한정된 리소스를 효율적으로 관리
● 프로젝트 성향/상황에 따른 Tool 선택
● 프로젝트의 생산성을 증가 시켜준다
● 다양한 Tool을 알아보고 적극적으로 도입
● Professional한 느낌

7. Basic

8. Slack
https://slack.com/
● 모든 work chat을 한 곳에서!
● 다양한 Tool들과 연동 가능
● Android/iOS/Web/Mac/Windows 지원

10. Dropbox
https://www.dropbox.com
● Seamless한 실시간 파일 싱크 지원
● 최신 수정 파일 리스트
● 삭제된 파일은 30일 안에 복구 가능
● Android/iOS/Web/Window/Mac/Linux

13. Evernote
https://evernote.com/
● 모든 Note를 한 곳에!
● Sync가 Seamless하게 이루어짐
● 웹사이트 스크랩시 매우 유용
● 거의 대부분의 기기 지원

17. Video Calls

18. Skype
http://www.skype.com/en/ (IP 순회)
● 무료 메세지, 통화, 영상 통화
● 화면 공유
● 주로 해외에서 대화시 or 인터뷰
● 거의 모든 기기에서 지원

21. Hangout
https://plus.google.com/hangouts
● 무료 메세지, 통화, 영상 통화
● 화면 공유
● Skype보다 강력한 Messenger 기능
● Android/iOS/Web/Chrome/Gmail/Google+

24. Project Management

25. Wrike
https://www.wrike.com
● Task Management Tool
● Gantt Chart 형식의 Timeline
○ Zoom in-out Effect
● Marketing Team에서 주로 사용
● Android/iOS/Web

29. Asana
https://asana.com
● Teamwork without email
● 사용하는 방법
○ Project에 관련된 Task를 생성
○ 각 Task를 책임자에게 Assign후 Follower/Due 설정
○ 메일로 온 Task는 x@mail.asana.com으로 Foward
○ My Task에서 오늘 할 일을 Mark하고 처리함
○ Tab+x로 각 Task Fullscreen 모드

32. Trello
https://trello.com/
● 온라인 Kanban board
● Card형식의 Task 생성 가능
● 다양한 용도로 사용 가능
● Android/iOS/Web/Kindel Fire/Window 8

36. Pivotal Tracker
http://www.pivotaltracker.com/
● 개발자를 위한 Project Managing Tool
● Github와 연동
● 기획자가 Task를 생성 => 개발자가 처리
● 개발 속도 등을 수치화 할 수 있다

38. Github Issues
https://github.com/usename/project/issues
● 개발자 만을 위한 Issue Tracker
● 오픈소스 작업시 많이 사용
● 외부의 다른 개발자가 Issue를 등록해줌

40. Planning

41. UI Sketchbook
http://www.uistencils.com/
● 손으로 직접 그림으로써 빠른 Sketch 가능
● 전체적인 Flow를 한눈에 확인 가능
● 빈 종이에 대충 그리는 것 보다 훨씬 의사 전
달력이 높고, 특히 화면 비율 등을 고려 할 수
있음

42. Power Point
https://products.office.com/en-us/powerpoint
● 대다수 기획자들이 PPT를 이용해서 UI를 그
림
● 정리해서 전달해 주는 용도
○ 공유해서 같이 수정하기는 까다로움
● 정확한 UI Prototyping이 어려움

45. Proto.io
https://proto.io/
● Mobile App & Web UI Prototype
● https://proto.io/en/demos/
● Simple Animation & Preview 모드 지원
● OS에 맞는 다양한 UI Component

47. Just In Mind
http://www.justinmind.com/
● Proto.io의 Mac Client Version
● Proto.io의 기능 + 훨씬더 다양하고 깔끔한
Widget
● 기능이 많아서 배워야 할 것도 많음

50. Origami
http://facebook.github.io/origami/
● Facebook에서 Paper를 만들면서 만든 서비
스
● Quartz Composer의 library
● 다양한 종류의 Patch들이 제공되고, 이들을
연결함으로써 그래픽 효과를 나타 낼 수 있음

51. Framer
http://framerjs.com/
● Photoshop or Sketch으로 만든 Design file을
Import
● Html/CSS/Javascript를 이용해서 Animation
을 추가
● Preview로 해당 Animation을 볼 수 있음

52. Specification

53. Specking
http://www.wuwacorp.com/specking/
● 귀찮은 명세 작업을 클릭 몇번으로 처리
○ Dimension, Text Style, Color 등
● 오히려 잘못된 값을 보내주는 실수가 줄어듬
● 명세에 드는 시간을 절반이상 줄여줌

56. Google Sites
https://sites.google.com/
● Google에서 제공하는 웹사이트 Template
● 웹사이트에서 디자이너, 개발자, 기획자가 명
세 수정 가능
● Specking에서 제공하지 않는 명세 내용을 한
곳에 정리 가능

57. Website

58. I Want My Name
https://iwantmyname.com/
● 간결한 도메인 등록 및 관리
● 다양한 App을 쉽게 Integrate 가능
○ Google Apps
○ Heroku
○ Square Space
○ Cargo
○ Shopify

59. WordPress
https://wordpress.org/
● 가장 대중적으로 알려진 쉽게 웹사이트 만드
는 방법
● 다양한 Theme 제공
● 다양한 Plugin 제공
● https://wordpress.com/ 에서 Hosting 가능

61. Square Space
http://squarespace.com/
● 트렌디한 웹사이트를 쉽게 만드는 Tool
● 다양한 Responsive Template 제공
● Template 변경이 용이함
● Style Editor에서 Style 수정

62. Shopify
http://www.shopify.com/
● 쇼핑몰을 가장 빠르게 만들 수 있는 웹사이트
● 다양한 결제 방식
● 다양한 Responsive Theme
● 기프트 카드 및 할인 코드

63. Cargo Collective
http://cargocollective.com/
● 개인 홈페이지 혹은 포트폴리오 용도
● 다양한 Artist들이 사용

64. Code Management

65. Github
https://github.com/
● 가장 Major한 Code Management Tool
● 여러 개발자가 Co-working 가능
● 대다수의 Open Source가 이곳에 있음
● 진행 상황을 commit 형태로 확인 가능

66. Bitbucket
https://bitbucket.org/
● Git based Code Management Tool
○ 기본적으로 Github와 비슷
● 3개의 private repository까지는 무료

67. Server Side

68. Heroku
https://heroku.com
● 다양한 종류의 서버를 쉽게 Cloud에 Launch
가능
● Dyno 개수를 조절함으로서 서버 속도 관리
가능
● Database, Monitoring, Email, Logging등 다

69. Parse
https://parse.com/
● 서버의 구현을 클라이언트에서 대체
● 기본적인 관리자 페이지, 어날리틱스 등이 제
공
● DB구조만 잡으면 다양한 언어에서 사용가능
○ Andorid/iOS/Web/Unity/Window/OSX/Javascript 등

70. Mobile Database

71. Realm
https://realm.io/
● 모바일용 NoSQL DB
○ Android의 Sqlite와 iOS의 Coredata를 대
체
● 속도가 매우 빠르고, DB가 안정적
● iOS, OSX, Android 모두 같은 형식의 DB를

72. Develop Process

73. Contents
● UX 디자인
● UI 디자인
● 개발
● 서비스 런칭

74. UX Design

75. UX 디자인
● 사용자의 입장에서 생각하라
● 디자인 가이드 라인을 따르라
● 다양한 서비스의 UX를 벤치 마크 하라
● 다양한 종류의 해상도를 고려하라
● 자신만의 색을 잃지 말라

76. UX 디자인 가이드 라인
● 아이폰
o Human Design Guideline
● 안드로이드
o Material Deisgn Guideline
● 웹
o Twitter Bootstrap
o Pinterest
o Responsive

78. UX 프로토 타이핑
● 직접 손으로 그린다
● 프로토 타이핑 툴을 사용한다

79. UX 그리기

80. UX
스
케
치
북

81. UX 프로토 타이핑 툴
● 앱
o Proto.io
o Just In Mind
o Origami
● 웹
o Balsamiq
o IUEditor
o Oven

82. UI Design

83. UI 디자인
● Layer 관리
● 앱의 경우 iPhone 6+ 해상도 기준으로 디자인
o Phone Resolution
● Specking으로 명세
● Cut&Slice me로 이미지 Export

84. UI 명세

85. Implementing

86. 개발
● 소스관리
o Github
o Bitbucket
● 개발 질문
o Stack Overflow
o Google groups
● 개발 관리 툴
o Pivotal Tracker
o Asana
o Trello
o Redmine
● 오픈소스를 최대한 많이 활용하라

87. iOS
● Objective C or Swift
● Cocoa Pod으로 버젼관리
● iOS Developer Library
● Code4App

88. 안드로이드
● Java + XML
● Gradle로 버젼관리
● Android Devloper Reference
● Android Arsenal

89. 서버
● Node.js
o Sails.js
o Hapi.js
● Ruby
o Ruby on Rails
● Python
o Django
o Plask
● Java
o Spring

90. 데이터베이스
● RDBMS
o MySQL
o MS-SQL
o Postgresql
● No-SQL
o MongoDB
o CouchDB
● Cache
o Redis
o Memcached

91. 웹 사이트
● HTLM + CSS + Java Script
● Font-End Framework
o Angular.js
o Backbone.js
o Famo.us
o React.js

92. Cloud Computing
● Heroku
● Amazon Web Service (AWS)
● Microsoft Azure
● Google Cloud

93. Launching

94. 앱 런칭
● 아이폰 앱 런칭
o Passion’s Blog
o App Review Times
o $99/Year
● 안드로이드 앱 런칭
o Code Dragon’s Blog
o 1시간 정도 소요
o $25/Once

95. 해외 강의
● 이론 수업
o Coursera
● 프로그래밍
o Code School
o Code Academy
o Code Combat

96. Out Sourcing

97. Out Sourcing
● Wishket http://www.wishket.com/
● Toptal http://www.toptal.com/

98. Freelancer

99. Freelancer
● Elance https://www.elance.com/
● Guru http://www.guru.com/
● Github Awards http://github-awards.com/

100. Practice

101. Thank You :)