1. 프론트엔드
개발이야기
NHN

2. Technology

3. Services

4. 프론트엔드개발팀의

5. 개발

6. 이야기
in

7. 광주
1
14년 6월 26일 목요일

8. 2
김지태jitae.kim@nhn.com
NHNTechnologyServices My Works:
Line for Firefox OS
삼성 CHS 프로젝트
네이버 윙버스
네이버 모바일 날씨
사내 시스템 개발
14년 6월 26일 목요일

9. 프론트-엔드개발?
3
14년 6월 26일 목요일

10. 4
웹(Web)
14년 6월 26일 목요일

11. 4
웹(Web)
HTML
CSS
Javascript
프론트-엔드
14년 6월 26일 목요일

12. 4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASP
Web
SER-
VER
DB
14년 6월 26일 목요일

13. 4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASP
Web
SER-
VER
DB
14년 6월 26일 목요일

14. 4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASP
Web
SER-
VER
DB
HTTP Protocol
14년 6월 26일 목요일

15. 프론트-엔드 개발 in 웹
개발언어 : HTML, CSS, JavaScript
웹 브라우저에서 동작 할 수 있는 언어를 이용하여 사용자가 이용하는
웹 페이지를 만드는 작업
웹 사이트가 다이나믹한 UI 로 구성되어 있어 프론트-엔드 개발의
역할이 중요
JavaScript를지원하지않을경우제대로이용하지못하는서비스증가
5
14년 6월 26일 목요일

16. 자바스크립트없는웹
6
14년 6월 26일 목요일

17. 네이버 포탈
7
14년 6월 26일 목요일

18. 구글 지도
8
14년 6월 26일 목요일

19. YouTube
9
14년 6월 26일 목요일

20. 페이스북
10
14년 6월 26일 목요일

21. 프론트-엔드 개발 in NAVER
11
프론트-엔드
14년 6월 26일 목요일

22. 프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업
14년 6월 26일 목요일

23. 프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
14년 6월 26일 목요일

24. 프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
JavaScript를 이용하여 복잡한 사용자 UI를 구현 하거나 Ajax를 이
용하여 백-엔드와 통신부분을 개발
14년 6월 26일 목요일

25. 프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
JavaScript를 이용하여 복잡한 사용자 UI를 구현 하거나 Ajax를 이
용하여 백-엔드와 통신부분을 개발
HTML5 및 node.js를 등장으로 웹앱, 데스크탑 애플리케이션,
백-엔드 서비스까지 개발 범위를 확장
14년 6월 26일 목요일

26. !
KEY POINT
글로벌 IT 기업들도 자바스크립트를 사용하여 풍부한 사용자 경험을
제공하고 있음
사용자에게 제공하는 UI 가 복잡해짐에 따라 자바스크립트 개발이
웹 서비스 개발에서 중요한 역할을 함
프론트-엔드 기술이 다양한 플랫폼으로 영역이 확대되고 있음
네이버에서의 프론트-엔드 개발은
브라우저 기술로 사용자 UI를 개발하는 것
12
14년 6월 26일 목요일

27. 네이버
프론트-엔드개발
13
14년 6월 26일 목요일

28. 소속 : NHN Technology Services / UIT 개발실
팀원 : 14명 + @
역할 :
- 네이버 서비스 프론트엔드 개발
- 최신 IT 기술 RD
- 프론트엔드 교육 커리큘럼 운영
- 페이스북 프론트엔드개발 그룹 운영
https://www.facebook.com/groups/webfrontend/
프론트엔드개발팀
14
14년 6월 26일 목요일

29. 프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일

30. 프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일

31. 프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일

32. 프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일

33. 프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일

34. 샘플 프로젝트 - 자판기
* 실제 사내 교육 과정으로 활용 중
16
14년 6월 26일 목요일

35. 스펙분석
17
14년 6월 26일 목요일

36. 18
UI/상세기획 분석
프레임워크 선택
라이브러리 선택
일정 산출
14년 6월 26일 목요일

37. UI 상세기획서 분석
19
14년 6월 26일 목요일

38. UI 상세기획서 분석
19
14년 6월 26일 목요일

39. UI 상세기획서 분석
19
음료수

40. 디스플레이

41. 영역
1.

42. 음료수

43. 출력
2.

44. 음료수

45. 가격

46. 출력
3.

47. 클릭시

48. 물건

49. 구매
4.

50. 재고

51. 없을

52. 경우

53. 품절

54. 표시
14년 6월 26일 목요일

55. UI 상세기획서 분석
19
음료수

56. 디스플레이

57. 영역
1.

58. 음료수

59. 출력
2.

60. 음료수

61. 가격

62. 출력
3.

63. 클릭시

64. 물건

65. 구매
4.

66. 재고

67. 없을

68. 경우

69. 품절

70. 표시
돈

71. 투입

72. 영역
1.

73. 투입된

74. 돈

75. 출력
2.

76. 지폐

78. 동전

79. 투입(드롭)
3.

80. 반환

81. 클릭시

82. 돈

83. 반환
14년 6월 26일 목요일

84. UI 상세기획서 분석
19
음료수

85. 디스플레이

86. 영역
1.

87. 음료수

88. 출력
2.

89. 음료수

90. 가격

91. 출력
3.

92. 클릭시

93. 물건

94. 구매
4.

95. 재고

96. 없을

97. 경우

98. 품절

99. 표시
돈

100. 투입

101. 영역
1.

102. 투입된

103. 돈

104. 출력
2.

105. 지폐

107. 동전

108. 투입(드롭)
3.

109. 반환

110. 클릭시

111. 돈

112. 반환
내

113. 지갑

114. 영역
1.돈

115. 종류에

116. 따라

117. 돈

118. 출력
2.내가

119. 가진

120. 돈

121. 출력
3.돈은

122. 드래그

123. 가능
4.드래그시

124. 돈은

125. 복사
5.드래그시

126. 내가

127. 가진

128. 돈이

129.
감소
14년 6월 26일 목요일

130. UI 상세기획서 분석
19
음료수

131. 디스플레이

132. 영역
1.

133. 음료수

134. 출력
2.

135. 음료수

136. 가격

137. 출력
3.

138. 클릭시

139. 물건

140. 구매
4.

141. 재고

142. 없을

143. 경우

144. 품절

145. 표시
돈

146. 투입

147. 영역
1.

148. 투입된

149. 돈

150. 출력
2.

151. 지폐

153. 동전

154. 투입(드롭)
3.

155. 반환

156. 클릭시

157. 돈

158. 반환
내

159. 지갑

160. 영역
1.돈

161. 종류에

162. 따라

163. 돈

164. 출력
2.내가

165. 가진

166. 돈

167. 출력
3.돈은

168. 드래그

169. 가능
4.드래그시

170. 돈은