Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.012 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

코드스쿼드 마스터즈세미나 - 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. 감사합니다~!

×