코드스쿼드 마스터즈세미나 - UI개발자가돼보자

436 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
436
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

코드스쿼드 마스터즈세미나 - UI개발자가돼보자

  1. 1. UI 개발자가 돼보자 윤지수,코드스쿼드
  2. 2. UI 개발자는 누구에요?
  3. 3. 답 : 개발자다!
  4. 4. User Interface 개발자, Web Client 개발자, Web Front-End 개발자, Front-End 개발자 다 똑같은 거
  5. 5. 디자인(x), 그냥 개발자!
  6. 6. UI(User Interface)를 개발하는 것이니, 디자인을 이해는 해야하는 !
  7. 7. 데이터, 로직이 중요한 백엔드 개발자와도 협업
  8. 8. 논리 감각 뭐야 결국, 둘다 필요
  9. 9. 뭐 아무튼 개발을 잘해야 UI 개발자에요.
  10. 10. 어디서 일을 하죠?
  11. 11. 웹 서비스를 하는 모든 곳
  12. 12. 대부분의 스타트업에서 많은 일을 하게 된다. 그런데 대부분 스타트업은 웹프론트엔드 개발자를 구하는 건 상당히 힘들 일..
  13. 13. 어떤 일을 하나요?
  14. 14. 구조 스타일 동작
  15. 15. HTML CSS JavaScript 생각보다 꽤 다른 세 가지를 잘 다뤄야 하는 부담감.
  16. 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. 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. 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. 19. DEMO 대부분 웹 개발을 하게 되고, 별거 아니지만 UX를 고려한 인터랙션개발을 고려하기도..
  20. 20. HTML CSS JavaScript HTML CSS JavaScript vs 국내에서는 크게 두 가지 직군으로 분류됨
  21. 21. 어떤 가치가 있나요?
  22. 22. 내가 만든 것으로 인해 세상이 더 편리해진다
  23. 23. 대부분의 ui개발자가 하는 말, “눈에 보이는 무언가를 개발 하는게 훨 잼나요” 
  24. 24. 어떻게 UI개발자가 돼죠?
  25. 25. 개발을 잘해야 해요. 디자인 능력이 중요하지 않아요. JavaScript 를 통해 프로그래밍을 먼저 배워야 해요. html,css를 익히고, 아주 작은 프로젝트를 합니다. UX와 UI를 따로 공부하지 않아도 됩니다.
  26. 26. 시장은 어때요?
  27. 27. 웹 프론트엔드 개발자가 의외로 존중받지 못해왔음 ㅜ.ㅜ 백엔드 개발 중심으로 웹서비스가 운영되어 왔기 때문에 입니다 하지만 최근엔, 프론트엔드 기술의 발전, 웹 사용성의 중요성과 함께 웹 프론트엔드의 인기가 많아짐
  28. 28. 꽤 인기있는 기술이다
  29. 29. 데스크탑 웹 다양한 기기에서 인기는 꾸준하다 모바일 웹 모바일 앱 (하이브리드 앱)
  30. 30. 웹 으로 앱을 만드는 실 사례가 심심치 않게 있다.
  31. 31. 입문자가 할 만한 거 맞죠?
  32. 32. Yes! 딱이죠! 쉽게 시작하지만, 다양한 능력을 배우게 됩니다. 자기랑 성향만 맞다면 UI개발자의 삶은 나름 꽤 즐거운 편이에요 :-)
  33. 33. 감사합니다~!

×