1. WebApp 개발 후기
leech-win@hanmail.net

2. Story
발단 전개 위기 절정 결말

3. 이 이야기는 개발자 Lee 의 WebApp - 집에가자 개발 스토리로 실화에 입각해 구성되었습니다.

4. 발단

5. 발단

6. 발단
수많은 Web 기술 Study 및 세미나

7. 발단
내 업무는 Web IDE 개발

8. 발단
내가 만든 IDE 로 개발한적이 있던
가..

9. 발단
파트장 曰 :
각자 WebApp 을
하나씩 만들어 보도록
1등하면 무선 마우
스,키보드셋트를
주려고했는데.
그러던
어느날... 최선을
다해야죠.

10. 전개

11. 전개
창작의 고통
- 어떤 App 을 만들까?
- 이런 App 이 있으면 좋겠다.
- 고퀄인가?

12. 전개

13. 전개

14. 전개

15. 전개

16. 전개
- 안되고 되고는 나중에 생각하자?
- 필요한기술은 구현하면서 배우자?
- 몰라서 안하는게 아니라 안해서 모르는 것?

17. 전개
그런데 어디서 뭐부터 시작해야 하나?

18. 전개
Search, Search, Search

19. 전개

20. 전개
- 웹통신의 데이타포맷
- Name, Value 쌍으로 구성
- 읽기쉬움

21. 전개
- 자바스크립트를 사용한 비동기 통신
- 클라이언트와 서버간에 데이터를 주고받는
기술
- 비동기요청 가능
- 서버에 요청하고, 응답올때까지 손놓고 기다
리지 않아도 되는 기술

22. 전개
+

23. 전개
- Powerful javascript library
- Control for DOM, CSS, AJAX..etc

24. 전개
- Mobile javascript framework

25. 전개
필요한 기본 Web 기술은 알았다.
다음은?

26. 전개
- Map service 선정
- Needs : 내가 필요한 서비스와 API 를 지원하는가?
- 현위치 근처 버스 정류장 검색 정보
- 목적지까지의 대중교통경로 및 환승 정보
- 목적지까지의 버스정류장 정보
- 버스정류장의 버스정보

27. 전개
서울시 공공버스운행정보
- 당시 공공정보 공개안함
Gooxxx, Navxx, Daxx
- 버스정보 및 경로API 지원안함

28. 전개

29. 전개
서비스중인 사이트는 어떻게 경로를 찾는 것일까?

30. 전개
이런저런 시도와 삽질... 중...
패킷분석도중 REST API 득템!

31. 위기
잘 풀리는 듯 했지만 위기는 찾아오고...

32. 위기
Map API 가 동작하지 않는다~!

33. 위기
인증 : abcdef11
123.456.789.11 / abcdef11
인증 : abcdef11
123.456.789.22 / abcdef11
- Map Server Access List –
인증 : abcdef11
1. 123.456.789.11 / abcdef11
2. ...
3. ...
123.456.789.33 / abcdef11
API 인증을 받은 URL 에서만 Map API Access 가능
App 을 설치한 Device 마다 URL 이 다를텐데 어쩌지?

34. 위기
대안은 Proxy!!!

35. 위기
또 하나의 문제~!
- Same Origin Policy
: javascript 에서 타도메인의 URL 로부터 값을 가져오는것은 원천적으로 불가
출처 : http://windowx.tistory.com/entry/jsonp-springmvc-example

36. 위기
출처 : http://windowx.tistory.com/entry/jsonp-springmvc-example

37. 위기
- 사내 웹서버를 Web Proxy 로 이용
123.456.789.11 / abcdef11 Map 요청
인증 : abcdef11
123.456.789.22
Map 요청
- Map Server Access List –
1. 123.456.789.11 / abcdef11
2. ...
3. ...
123.456.789.33

38. 위기
- RSS, JSON 등의 웹자료를 필터링하여 수집가능한 서비스
- Pipe Web Address 제공

39. 절정

40. 절정
디자이너를 만나기 전 UX는 나름 만족중

41. 절정
디자이너를 만난 후 UX는 신세경~!

42. 절정
하지만 과정은...

43. 절정
디자이너 :
Floating 버튼정도는 넣어줘야 App이지~
JQM 스타일 Header 의 Back 버튼도 후져
디자이너와의 협업

44. 절정
그러나 해보면 안되는건 없더라...

45. 절정
디자이너 : 나와 다른 분야의 전문가

46. 절정
Designer Developer
창의적 일관성
주관적 객관적
경쟁 협동
마우스, 타블렛 키보드
감수성 논리적사고

47. 절정
Responsive Web design?

48. 절정

49. 절정
맞춤형 CSS 와 Image

50. 절정
반응형 웹 디자인의 완성

51. 절정
CSS 는 삽질로 쌓은 노하우가 기술

52. 결말
Web App 어렵지 않아요~
HTML5, CSS3, WebSocket...
기술은 많지만 나한테 필요한건 얼마안된다는 점~!

53. 결말

54. Thank you