2016년 11월 마스터즈세미나 발표자료

1. UI 개발자가 돼보자
윤지수,코드스쿼드

2. UI 개발자는 누구에요?

3. 답 :
개발자다!

4. User Interface 개발자,
Web Client 개발자,
Web Front-End 개발자,
Front-End 개발자
다 똑같은 거

5. 디자인(x), 그냥 개발자!

6. UI(User Interface)를 개발하는 것이니,
디자인을 이해는 해야하는 !

7. 데이터, 로직이 중요한 백엔드 개발자와도 협업

8. 논리 감각
뭐야 결국, 둘다 필요

9. 뭐 아무튼 개발을 잘해야
UI 개발자에요.

10. 어디서 일을 하죠?

11. 웹 서비스를 하는 모든 곳

12. 대부분의 스타트업에서
많은 일을 하게 된다.
그런데 대부분 스타트업은 웹프론트엔드
개발자를 구하는 건 상당히 힘들 일..

13. 어떤 일을 하나요?

14. 구조
스타일 동작

15. HTML
CSS JavaScript
생각보다 꽤 다른 세 가지를
잘 다뤄야 하는 부담감.

16. HTML
<section class="main-section" id="white-level">
<div class="header col-lg-12 text-center">
<h2 class="section-heading">화이트 레벨</h2>
</div>
<div class="container">
<div class="row main-row">
<div class="col-lg-12 text-center">
<h3 class="section-heading">누가 대상인가요?</h3>
<p class="course-answer">화이트레벨은 프로그래밍 입문자를 대상으로 합니다.<br>
프로그래밍 경험이 전혀 없는 비전공자, <br>
개발을 깊이있게 알고 싶은 기획자나 관리자, <br>
창업을 생각중인 개발자 모두 대상입니다. <br>
</p>
</div>
<div class="col-lg-12 text-center programing-kind">
<h3 class="section-heading">어떤 프로그래밍을 배우나요?</h3>
<p class="course-answer">화이트레벨에서는 프로그래밍 기초부터 단계별로 배웁니다. 프로그래밍의 원리와 동작을 이해하는 것도 입문자에게는 무엇보다 중요합니다. <br>시작과정이지만 프로그래밍
입문을 위해 3가지 선택을 할 수 있습니다. 데이터분석기초에서는 Pyhton을 배우고, 웹프론트엔드 개발에서는 JavaScript언어를 배우며, 모바일 애플리케이션에서는 Swift 언어를 배웁니다. </p>
<div class="row">
<div class="col-md-2 col-md-offset-3 rect-shape honux">데이터 분석의 기초<br> (Python, 데이터수집, 데이터분석, 시각화) </div>
<div class="col-md-2 rect-shape crong">웹 프론트엔드 개발<br> (HTML, CSS, JavaScript, NodeJS, Cloud) </div>
<div class="col-md-2 rect-shape jk">모바일 애플리케이션 개발<br> (Swift, Kitura, Cloud) </div>
</div>
<p class="course-answer">
클라이언트 기술과 백엔드 기술의 비율은 7:3정도 입니다.
하지만 개인별로 배움의 범위와 비율은 달라질 수 있습니다. 강의는 초기 3주간 매일 1-2시간 정도 진행되고, 나머지 모든 시간은 프로젝트를 합니다. <br>
하지만 필요한 강의는 중간에 언제든 열릴 수 있습니다 :-)</p>
</div>
<div class="col-lg-12 text-center other-topics">
<h3 class="section-heading">프로그래밍 이외에 무엇을 배우나요?</h3>
<p class="course-answer"> 마스터즈 코스에서는 JAVA, JavaScript, Swift와 같은 프로그래밍 언어뿐만 아니라 프로그래머에게 필요한 컴퓨터기초지식 및 현업에서 요구하는 다양한 개발 지식을 배웁
니다. <br> 이외에도 실무를 위해서 필요하다고 생각되는 기초지식이나 개발지식이 있다면 마스터에게 요청하여 강의를 들을 수 있습니다.</p>
<div class="row">
<ul class="center-block col-md-5 list-unstyled">
<li> <strong>디버깅</strong></li>
<li> <strong>Unix(linux)</strong></li>
<li> <strong> 컴퓨터공학 기초지식(알고리즘, 네트워크, 데이터베이스) </strong></li>
<li> <strong>git, github기반 Version control system</strong></li>
<li> <strong>프로젝트 개발 방법론 (Agile & Scrum)</strong></li>
</ul>
</div>
</div>

17. CSS
.timeline .timeline-heading h4 {
margin-top: 0;
color: inherit;
}
.timeline .timeline-heading h4.subheading {
text-transform: none;
}
.timeline .timeline-body > p,
.timeline .timeline-body > ul {
margin-bottom: 0;
}
@media (min-width: 768px) {
.timeline:before {
left: 50%;
}
.timeline > li {
margin-bottom: 100px;
min-height: 100px;
}
.timeline > li .timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline > li .timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
.timeline > li .timeline-image h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px;
}
}

18. JavaScript
(function() {
"use strict";
function runScrollAnimation(targetTop) {
var STEP = 10;
var scrollValue=0;
function _move() {
if(!scrollValue) scrollValue= STEP;
else scrollValue = STEP + scrollValue*1.10;
if(scrollValue < targetTop) {
window.scrollTo(0, scrollValue);
window.requestAnimationFrame(_move);
} else {
window.scrollTo(0, targetTop);
}
}
window.requestAnimationFrame(_move);
}
function getMatchedTargetOffsetTop(el) {
var sID = null;
if(el.nodeName ==="BUTTON") sID = el.parentElement.getAttribute("href");
else if(el.nodeName === "SPAN") sID = el.parentElement.parentElement.getAttribute("href");
else {}
return document.querySelector(sID).offsetTop;
}
function attachCourseKindEvents(elCourseKind) {
elCourseKind.addEventListener("click", function(evt) {
if(! window.requestAnimationFrame) return;
evt.preventDefault();
var targetTop = getMatchedTargetOffsetTop(evt.target);
runScrollAnimation(targetTop);
});
}

19. DEMO
대부분 웹 개발을 하게 되고,
별거 아니지만
UX를 고려한 인터랙션개발을 고려하기도..

20. HTML CSS
JavaScript
HTML CSS
JavaScript
vs
국내에서는 크게 두 가지 직군으로 분류됨

21. 어떤 가치가 있나요?

22. 내가 만든 것으로 인해 세상이 더 편리해진다

23. 대부분의 ui개발자가 하는 말,
“눈에 보이는 무언가를 개발 하는게 훨 잼나요”

24. 어떻게 UI개발자가 돼죠?

25. 개발을 잘해야 해요.
디자인 능력이 중요하지 않아요.
JavaScript 를 통해 프로그래밍을 먼저 배워야 해요.
html,css를 익히고,
아주 작은 프로젝트를 합니다.
UX와 UI를 따로 공부하지 않아도 됩니다.

26. 시장은 어때요?

27. 웹 프론트엔드 개발자가 의외로 존중받지 못해왔음 ㅜ.ㅜ
백엔드 개발 중심으로 웹서비스가 운영되어 왔기 때문에 입니다
하지만 최근엔,
프론트엔드 기술의 발전, 웹 사용성의 중요성과 함께
웹 프론트엔드의 인기가 많아짐

28. 꽤 인기있는 기술이다

29. 데스크탑 웹
다양한 기기에서 인기는 꾸준하다
모바일 웹
모바일 앱
(하이브리드 앱)

30. 웹 으로 앱을 만드는 실 사례가 심심치 않게 있다.

31. 입문자가 할 만한 거 맞죠?

32. Yes! 딱이죠!
쉽게 시작하지만,
다양한 능력을 배우게 됩니다.
자기랑 성향만 맞다면 UI개발자의 삶은
나름 꽤 즐거운 편이에요 :-)

33. 감사합니다~!