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

간략한 소개

● 서울과학고등학교, KAIST 전산학과 졸업

● 300만 다운로드 어플리케이션 제작

● Vingle 안드로이드 개발자

● BTTENDANCE 스타트업 창업

● 외 수많은 모바일 어플리케이션 및 웹 개발

목차

1. 어플리케이션과 웹사이트 개발을 위한 툴

2. 각 툴을 이용한 앱 및 웹 개발 과정

3. 외주를 통한 앱 및 웹 개발 과정

4. 해외 프리렌서 개발자 구인

5. 간략한 웹사이트 랜딩 페이지 제작

Tools

TOOLs

왜 적절한 툴을 사용하는 것이 중요한가?

● 한정된 리소스를 효율적으로 관리

● 프로젝트 성향/상황에 따른 Tool 선택

● 프로젝트의 생산성을 증가 시켜준다

● 다양한 Tool을 알아보고 적극적으로 도입

● Professional한 느낌

Basic

Slack

https://slack.com/

● 모든 work chat을 한 곳에서!

● 다양한 Tool들과 연동 가능

● Android/iOS/Web/Mac/Windows 지원

Dropbox

https://www.dropbox.com

● Seamless한 실시간 파일 싱크 지원

● 최신 수정 파일 리스트

● 삭제된 파일은 30일 안에 복구 가능

● Android/iOS/Web/Window/Mac/Linux

http://www.youtube.com/watch?v=xy9nSnalvPc

http://www.youtube.com/watch?v=7QmCUDHpNzE

Evernote

https://evernote.com/

● 모든 Note를 한 곳에!

● Sync가 Seamless하게 이루어짐

● 웹사이트 스크랩시 매우 유용

● 거의 대부분의 기기 지원

http://www.youtube.com/watch?v=QyuAn1Z_7uM

Video Calls

Skype

http://www.skype.com/en/ (IP 순회)

● 무료 메세지, 통화, 영상 통화

● 화면 공유

● 주로 해외에서 대화시 or 인터뷰

● 거의 모든 기기에서 지원

Hangout

https://plus.google.com/hangouts

● 무료 메세지, 통화, 영상 통화

● 화면 공유

● Skype보다 강력한 Messenger 기능

● Android/iOS/Web/Chrome/Gmail/Google+

Project Management

Wrike

https://www.wrike.com

● Task Management Tool

● Gantt Chart 형식의 Timeline○ Zoom in-out Effect

● Marketing Team에서 주로 사용

● Android/iOS/Web

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 모드

Trello

https://trello.com/

● 온라인 Kanban board

● Card형식의 Task 생성 가능

● 다양한 용도로 사용 가능

● Android/iOS/Web/Kindel Fire/Window 8

Pivotal Tracker

http://www.pivotaltracker.com/

● 개발자를 위한 Project Managing Tool

● Github와 연동

● 기획자가 Task를 생성 => 개발자가 처리

● 개발 속도 등을 수치화 할 수 있다

Github Issues

https://github.com/usename/project/issues

● 개발자 만을 위한 Issue Tracker

● 오픈소스 작업시 많이 사용

● 외부의 다른 개발자가 Issue를 등록해줌

Planning

UI Sketchbook

http://www.uistencils.com/

● 손으로 직접 그림으로써 빠른 Sketch 가능

● 전체적인 Flow를 한눈에 확인 가능

● 빈 종이에 대충 그리는 것 보다 훨씬 의사 전

달력이 높고, 특히 화면 비율 등을 고려 할 수

있음

Power Point

https://products.office.com/en-us/powerpoint

● 대다수 기획자들이 PPT를 이용해서 UI를 그

림

● 정리해서 전달해 주는 용도○ 공유해서 같이 수정하기는 까다로움

● 정확한 UI Prototyping이 어려움

● Mac과 연동이 다소 불편함

Proto.io

https://proto.io/

● Mobile App & Web UI Prototype

● https://proto.io/en/demos/

● Simple Animation & Preview 모드 지원

● OS에 맞는 다양한 UI Component

Just In Mind

http://www.justinmind.com/

● Proto.io의 Mac Client Version

● Proto.io의 기능 + 훨씬더 다양하고 깔끔한

Widget

● 기능이 많아서 배워야 할 것도 많음

Origami

http://facebook.github.io/origami/

● Facebook에서 Paper를 만들면서 만든 서비

스

● Quartz Composer의 library

● 다양한 종류의 Patch들이 제공되고, 이들을

연결함으로써 그래픽 효과를 나타 낼 수 있음

Framer

http://framerjs.com/● Photoshop or Sketch으로 만든 Design file을

Import● Html/CSS/Javascript를 이용해서 Animation을 추가

● Preview로 해당 Animation을 볼 수 있음

Specification

Specking

http://www.wuwacorp.com/specking/

● 귀찮은 명세 작업을 클릭 몇번으로 처리○ Dimension, Text Style, Color 등

● 오히려 잘못된 값을 보내주는 실수가 줄어듬

● 명세에 드는 시간을 절반이상 줄여줌

http://www.youtube.com/watch?v=_ThXuPhcgNw

Google Sites

https://sites.google.com/

● Google에서 제공하는 웹사이트 Template

● 웹사이트에서 디자이너, 개발자, 기획자가 명

세 수정 가능

● Specking에서 제공하지 않는 명세 내용을 한

곳에 정리 가능

Website

I Want My Name

https://iwantmyname.com/● 간결한 도메인 등록 및 관리● 다양한 App을 쉽게 Integrate 가능

○ Google Apps○ Heroku○ Square Space○ Cargo○ Shopify

WordPress

https://wordpress.org/

● 가장 대중적으로 알려진 쉽게 웹사이트 만드

는 방법

● 다양한 Theme 제공

● 다양한 Plugin 제공

● https://wordpress.com/ 에서 Hosting 가능

Square Space

http://squarespace.com/

● 트렌디한 웹사이트를 쉽게 만드는 Tool

● 다양한 Responsive Template 제공

● Template 변경이 용이함

● Style Editor에서 Style 수정

Shopify

http://www.shopify.com/

● 쇼핑몰을 가장 빠르게 만들 수 있는 웹사이트

● 다양한 결제 방식

● 다양한 Responsive Theme

● 기프트 카드 및 할인 코드

Cargo Collective

http://cargocollective.com/

● 개인 홈페이지 혹은 포트폴리오 용도

● 다양한 Artist들이 사용

Code Management

Github

https://github.com/

● 가장 Major한 Code Management Tool

● 여러 개발자가 Co-working 가능

● 대다수의 Open Source가 이곳에 있음

● 진행 상황을 commit 형태로 확인 가능

Bitbucket

https://bitbucket.org/

● Git based Code Management Tool○ 기본적으로 Github와 비슷

● 3개의 private repository까지는 무료

Server Side

Heroku

https://heroku.com

● 다양한 종류의 서버를 쉽게 Cloud에 Launch

가능

● Dyno 개수를 조절함으로서 서버 속도 관리

가능

● Database, Monitoring, Email, Logging등 다

수의 Add-on을 제공

Parse

https://parse.com/

● 서버의 구현을 클라이언트에서 대체

● 기본적인 관리자 페이지, 어날리틱스 등이 제

공

● DB구조만 잡으면 다양한 언어에서 사용가능○ Andorid/iOS/Web/Unity/Window/OSX/Javascript 등

Mobile Database

Realm

https://realm.io/

● 모바일용 NoSQL DB

○ Android의 Sqlite와 iOS의 Coredata를 대

체

● 속도가 매우 빠르고, DB가 안정적

● iOS, OSX, Android 모두 같은 형식의 DB를

사용

Develop Process

Contents● UX 디자인

● UI 디자인

● 개발

● 서비스 런칭

UX Design

UX 디자인● 사용자의 입장에서 생각하라

● 디자인 가이드 라인을 따르라

● 다양한 서비스의 UX를 벤치 마크 하라

● 다양한 종류의 해상도를 고려하라

● 자신만의 색을 잃지 말라

UX 디자인 가이드 라인● 아이폰

o Human Design Guideline● 안드로이드

o Material Deisgn Guideline● 웹

o Twitter Bootstrapo Pinteresto Responsive

UX 프로토 타이핑● 직접 손으로 그린다

● 프로토 타이핑 툴을 사용한다

UX 그리기

UX스케치북

UX 프로토 타이핑 툴● 앱

o Proto.ioo Just In Mindo Origami

● 웹o Balsamiqo IUEditoro Oven

UI Design

UI 디자인● Layer 관리

● 앱의 경우 iPhone 6+ 해상도 기준으로 디자인o Phone Resolution

● Specking으로 명세

● Cut&Slice me로 이미지 Export

UI 명세

Implementing

개발● 소스관리

o Githubo Bitbucket

● 개발 질문o Stack Overflowo Google groups

● 개발 관리 툴o Pivotal Trackero Asanao Trelloo Redmine

● 오픈소스를 최대한 많이 활용하라

iOS● Objective C or Swift

● Cocoa Pod으로 버젼관리

● iOS Developer Library

● Code4App

안드로이드

● Java + XML

● Gradle로 버젼관리

● Android Devloper Reference

● Android Arsenal

서버

● Node.jso Sails.jso Hapi.js

● Rubyo Ruby on Rails

● Pythono Djangoo Plask

● Javao Spring

데이터베이스

● RDBMSo MySQLo MS-SQLo Postgresql

● No-SQLo MongoDBo CouchDB

● Cacheo Rediso Memcached

웹 사이트● HTLM + CSS + Java Script

● Font-End Frameworko Angular.js

o Backbone.js

o Famo.us

o React.js

Cloud Computing● Heroku

● Amazon Web Service (AWS)

● Microsoft Azure

● Google Cloud

Launching

앱 런칭● 아이폰 앱 런칭

o Passion’s Blogo App Review Timeso $99/Year

● 안드로이드 앱 런칭o Code Dragon’s Blogo 1시간 정도 소요o $25/Once

해외 강의● 이론 수업

o Coursera

● 프로그래밍o Code School

o Code Academy

o Code Combat

Out Sourcing

Out Sourcing

● Wishket http://www.wishket.com/

● Toptal http://www.toptal.com/

Freelancer

Freelancer

● Elance https://www.elance.com/

● Guru http://www.guru.com/

● Github Awards http://github-awards.com/

Practice

Thank You :)