Fast campus School

프론트엔드 개발 EVENT

[HIRING DAY 현장 스케치] 웹에 아름다움을 입히는, 프론트엔드 개발자를 꿈꾸다!

웹에 아름다움을 입히는, 프론트엔드 개발자를 꿈꾸다!

2017.02.24 | 1074 명 읽음


SCHOOL은 패스트캠퍼스의 3개월 전일제 과정입니다. 데이터 사이언스부터 웹 프로그래밍, 디지털 마케팅, iOS 개발, 프론트엔드 개발, 안드로이드 개발, UX/UI 디자인까지 다양한 분야의 학습을 제공하고 있죠. 사람들이 '하고 싶은 일'을 하며 살 수 있도록 돕자는 비전을 가지고 꾸준히 달려오고 있습니다. 이미 SCHOOL을 통해 원하는 회사로 취업/이직에 성공한 수료생의 비율이 80%를 돌파하며 세간의 이목을 끌고 있죠.


오늘은 '프론트엔드 개발 SCHOOL'의 HIRING DAY 현장 스케치를 준비했습니다. 프론트엔드 개발 SCHOOL은 HTML, CSS, 자바스크립트의 기본부터 시작하여 jQuery, AngularJS까지 다룰 수 있도록 체계적인 커리큘럼을 지니고 있죠. 수박 겉핥기 식의 교육이 아닌 실습 중심의 수업으로 기술적인 코딩 능력뿐만 아니라 개발자로서의 사고력과 문제 해결력까지 키울 수 있습니다. 프론트엔드 개발자라는 꿈을 안고 새로운 여정을 시작했던 수강생들은 어떤 3개월을 보냈을까요?





지난 9월 23일, 수십 명의 인사 담당자들 앞에 선 프론트엔드 디자인 SCHOOL의 수강생들은 오랜 시간 동안 준비해온 프로젝트를 유감없이 선보였습니다. 자리에 있던 참여기업 담당자들은 물론이고 3개월을 함께 해온 패스트캠퍼스의 매니저들도 놀라게 할 만큼 수준 높은 발표였죠. 과연 어떤 발표를 진행했는지, HIRING DAY 이후 어떤 길을 걷고 있는지 궁금한 분들을 위해 프레젠테이션 스케치를 준비했습니다.






BeRealist, 비현실적인 아이디어가 현실이 된다. 유정식


"포트폴리오에서 자기가 가진 특색이나 장점을 잘 드러내는 것이 중요하다."



프론트엔드 개발 SCHOOL 1기 수료생 유정식 님께서는 실현하고자 하는 바를 행동 항목/참조 항목, 후 순위 항목으로 나누어 떠오르는 아이디어를 조직화할 수 있는 To-do list 웹앱, 'BeRealist'를 개발하고 싶으셨습니다.



이를 위해 빌드툴인 gulp와 AngularJS, Sass 등을 활용해 프로토타입을 구현하고자 하셨죠. 보다 완성도 있는 프로토타입을 위해 과정에서 다루지 않았던 Firebase를 직접 연동시키는 열정을 볼 수 있었습니다. 



먼저 서비스의 최소 가치 모델이라고 생각한 행동 항목 부분부터 빠르게 구현한 뒤, 다른 기능을 추가하는 방식으로 접근했습니다. 발표 당시는 핵심 기능인 행동 항목 부분만 구현된 상태였죠. Sketch로 간단한 UI 디자인을 구성하고, 기본 기능 구현을 위해 AngularJS 탬플릿에 마크업, 그리고 Firebase를 연동하는 작업을 했습니다. 버튼이나 툴팁 등 재사용 가능한 스타일은 모듈화하여 효율적이고 확장성이 있는 Sass를 활용했습니다.



그렇게 완성된 서비스를 시연했습니다. 소셜 로그인을 하면 최초 사용자에게는 첫 프로젝트를 생성하는 뷰가 뜹니다. 작성하고 확인을 누르면 프로젝트 대시보드가 나타나는데, 행동목록 또한 추가할 수 있도록 구성했습니다. 프로젝트 마감일 또한 지정할 수 있죠. 상단 GNB에는 툴팁 메뉴로 설정 가능하도록 했고, 사이드 메뉴에서 프로젝트를 생성/선택할 수 있게 했습니다. 또한 반응형도 구현하여 로그인하면 행동목록 부분만 보이도록 구현했죠.



유정식 님께서는 본 프로젝트를 진행하며 기능 하나를 완성하면 숨어있던 문제들이 끊임없이 나타나는 것을 확인하며 프론트엔드 개발이 정말 만만치 않다는 것을 실감하셨다고 합니다. 하지만 매번 고민하고, 찾고, 물어가며 문제를 하나하나 해결해가는 과정에서 진짜로 성장하는 자신을 발견할 수 있었죠.


이어진 참여기업과의 인터뷰 시간에서는 쉼없이 인터뷰를 진행할 만큼 기업 담당자 분들이 매우 궁금해 하시는 지원자였죠. 결과물의 퀄리티는 물론, 적극적으로 문제를 해결하는 태도가 좋은 점수를 얻은 바탕이었습니다. 인터뷰 중에는 기술적인 부분에 명쾌하게 대답할 수 있는 준비가 부족했다며 아쉬움을 토로하기도 하셨지만, 역시나 다양한 오퍼를 받으며 현재 열심히 면접을 진행 중에 있습니다. 스쿨을 통해 '프론트엔드 개발자로서의 자신감'과 '성장경험'을 얻었다는 정식님, 앞으로의 걸음도 기대합니다. 






건강 애플리케이션 Fitbit을 웹 페이지로 재탄생시키다. 이지연


"현업에 있는 개발자분들과 이야기하며 회사에서는

어떤 사람을 필요로 하는지, 그곳에 가면 어떤 일을 하게 될지 알 수 있어서 좋았습니다."


이지연 님은 문헌정보학을 전공하셨지만, 학과 수업을 듣던 중 IT 기술에 관심을 갖게 되셨고 이내 컴퓨터 공학과에 편입하여 프론트엔드 개발자로서의 길을 걷고 계십니다. 더 확실하게 기초를 다지고 역량을 높이기 위해 프론트엔드 개발 SCHOOL 1기 수강생이 되셨는데요, 푸드와 건강에 관심이 많기에 Fitbit이라는 피트니스 트래킹 애플리케이션을 웹 페이지로 바꾸고, PIZZERIA라는 가상 음식점의 웹 페이지를 구현하는 프로젝트를 진행하셨습니다. 



그중 Fitbit의 화면을 웹 페이지용으로 재구성한 프로젝트를 소개해 드리겠습니다. 기존 Fitbit의 PC 애플리케이션 화면입니다.



총 다섯 개의 페이지를 만들었는데, 다섯 개 페이지가 하나의 페이지에서 뷰만 바뀌는 형식의 Single Page Application으로 구성하기 위해서 ngRoute라는 모듈을 사용하였습니다.



대시보드 페이지를 들어가면 심박 수에 따라 하트 모양의 애니메이션이 나타나고 수치에 따라서 움직임이 바뀌게 됩니다. 또한 사용자에 따라서 결과를 보여주는 그래프도 자동으로 바뀌게 됩니다. 또한 우측 상단 '수면 시간 그래프 보기'를 누르면 그래프가 뜨는데 이는 svg 요소로 구현했습니다. 수면시간 데이터를 그래프로 시각화하기 위해서는 d3.js라는 데이터 시각화 라이브러리를 활용했습니다. 또한 다른 페이지로 넘어갈 때는 CSS 애니메이션을 이용해서 부드러운 움직임이 구현하도록 했습니다. 또한 페이지들은 반응형으로 구성되어 있어서 디바이스 크기에 따라서 최적화된 화면을 확인할 수 있습니다. 



지연님께서는 Hiring Day 이후에 만들었던 페이지를 좀 더 발전시켜 볼 것이라고 말씀하셨습니다. API를 붙여 실제 데이터를 로드하고 d3.js를 더욱 깊이있게 활용해 데이터를 보다 다양하게 표현할 수 있도록 업그레이드할 예정입니다. 과정 이후에도 계속 성장하여, '많은 사람들에게 도움이 되는 서비스를 만드는 프론트엔드 개발자가 되고 싶다'는 지연님의 바람이 이루어지길 응원합니다. 






Milestone, 럭셔리하고 세련된 웹페이지. 김한웅


"생각보다 떨렸지만, 인사 담당자와의 인터뷰는 순조롭게 진행되었어요.

그 외에도 여러 군데 면접을 봤고, 좋은 결과를 기다리고 있습니다."


김한웅님은 산업 공학 및 HCI(Human Computer Interaciton)을 전공한 후, UX(사용자 경험) 컨설팅 사에서 리서치 및 디자인을 통해 UX를 설계해오셨습니다. 하지만 리서치와 디자인을 넘어, 직접 무언가를 구현하고 작동시키고 싶다는 생각을 하셨다고 합니다. 그것이 프론트엔드 개발 SCHOOL을 수강하게 된 이유였죠.



12주간의 학습을 바탕으로 한웅님은 Milestione이라는 웹 페이지를 구현하셨습니다. 본 포트폴리오는 parallax 등의 다양한 interaction을 적용한 페이지입니다. 마크업은 EJS를 사용해서 각 페이지나 큰 단위의 섹션 별로 파일을 구성했습니다. 또한 웹 표준과 접근성을 철저히 준수했죠. 오프 왁스 라는 툴로 검사를 진행했을 때 95점이 나왔을 정도였습니다.


한웅님의 프로젝트 웹 사이트 보기 >>>



전체적인 레이아웃은 주로 플렉스 박스를 활용하여 작업을 했고, 반응형과 관련된 부분은 좀 더 작업하기 편하도록 미디어 쿼리를 쓰지 않고 자바스크립트로 분기점에 따라 클래스를 변경해주는 방식으로 대체했습니다. 또한 Sass를 활용해서 페이지 별로 파일을 분리하고 변수와 믹스인을 활용해서 작업하였습니다.



자바스크립트를 사용해 페이지 전체적으로 자주 활용하는 기능은 헬퍼 함수를 만들어서 작업을 했고, 스크롤 이동에 따라 내비게이션의 포커스가 변화하는 효과는 스크롤 매직이라는 플러그인을 활용하여 구현하였습니다. 웹 페이지 가운데에 있는 캐러셀은 AngularJS 컨트롤러에 JSON 데이터만 추가해주면 콘텐츠가 늘어날 수 있는 형태로 구현했습니다. 다른 페이지의 UI 컴포넌트들도 모두 동일하게 JSON 데이터만 추가하면 편리하게 관리 가능하도록 개별 컨트롤러로 구현했죠.


그런데 이렇게 여러 플러그인들을 AngularJS와 함께 사용하면서 문제점이 하나 있었습니다. 처음에 플러그인의 기능들이 세팅되는 시점보다 AngularJS의 콘텐츠들이 렌더링 되는 시점이 늦어서 제대로 동작하지 않는다는 것이었죠. 이와 관련하여 아이소토프 플러그인의 문제는 커스텀 디렉티브를 찾아서 해결했고, 스크롤 매직 플러그인과 관련된 오류는 별도의 함수를 만들어 해결했습니다. 마지막으로 Angular의 기본적인 디렉티브를 활용해서 폼 벨리데이션 효과를 구현했습니다.



한웅님께서는 Hiring Day 이후에 HTML, CSS, JS의 세 분야에 있어서 비약적인 성장을 했으며 프론트엔드 분야의 초석을 단단히 다질 수 있었다고 말씀하셨습니다. 공부를 하면 할수록 끝이 없다는 것을 느꼈지만, 앞으로 쉬지 않고 달려갈 것이라는 각오도 보여주셨죠. 한웅님의 행보가 더욱 기대됩니다.




프론트엔드 개발 SCHOOL의 프로젝트, 잘 보셨나요? 3개월 간의 여정을 치열하게 소화하며 수준 높은 발표까지 선보인 개발자들! 하이어링 데이 이후 과정은 종강했지만 현대카드, 로켓펀치 및 유수의 스타트업들을 중심으로 여러 채용과정이 진행중에 있습니다. 채용 및 취업 후기가 궁금하시다면? 다음 포스팅을 기대해주세요! 


프론트엔드 개발 SCHOOL을 더 알고 싶다면? ▼

[클릭] 프론트엔드 개발 SCHOOL 자세히 보기 >>>