협력사 강연 - 네이버

목차

 

개발자, 이렇게 시작해보자 : FE 개발을 중심으로 살펴본 네이버란 회사

 

강연자:

우상훈 님 스마트 스튜디오 이사

 

우상훈님에 대해:

20년전 개발자 지망생. 

smarteditor등의 여러 FE도구를 만들고 FE 성장 전략을 리드하고 있다.

 

나모인터렉티브 - 나모 웹에디터 UX 디자인 / Product Manager 10년

LG 전자 Technical Writer 기술문서 제작. 공통된 모듈 사용법 1년

네이버 Frontend Delveloper 네이버 지도, 네이버 메인, 네이버 자동차, 네이버 부동산, 

 

컴공 출신이지만 개발을 좋아하진 않았다.

이것저것 지저분한 경력이지만 제 나름의 경쟁력입니다.

 

결론: 사파 기술을 다 익히고 개발자가되어도 오히려 좋은 면도 있다. 

 

 

할 이야기

 

• 네이버라는 곳이 어떤 개발 문화를 가지는지
• FE 개발자 위주, 다른데선 백엔드, AI 이야기는 많이 해주니까. 하지만, 개발자에게 공통되는
• 네이버와 FE개발에 대한 소개, 그리고 인재상등. 

 

 

 

면접에 대한 오해

면접관은 우리 편이다.

떨어트리기 싫다. 

그래야 잘 키워서 부려먹지. 

이렇게 생각을 바꾸면 도움이 될 수 있다.

 

어떤일을 했든, 개발자가 될 수 있다.

 

 

 

근데 Frontend 개발이 뭘까요?

 

FE개발자는

• 웹기술을 사용해서
• 웹브라우저에서 사용하는
• 웹사이트나
• 웹 어플리케이션을 만듭니다. 

 

5년전엔 정답에 가까웠지만, 현재는 50점 정도의 답이다. 

 

keypoint : 비판적 사고 논리력 학습 능력

 

• 웹기술을 사용해서
• 웹 브라우저를 포함한 다양한 환경에서 사용하는
• 웹사이트나
• 웹 어플리케이션을 만듭니다. 

 이 더 맞다. 

 

다양한 환경

• 헤드리스 부라우저
• 웹뷰
• 네이트브
• 바이너리

자판기 LCD 키오스크, 교통카드 체크 IOT등등

 

헤드리스 브라우저는 알아야한다. 굉장히 도움에 된다. 

 

 

FE 특징

핵심 기술은 Javascript 

 

c같은 저수준 언어를 경험하고 js같은 고수준언어로 넘어가는건 좋은것같다.

 

JS는 사용자와 브라우저가 인터렉션을 하기 위해 나온 언어.

인터렉션이라는 용어가 일반적으로 매우 잘못 쓰이고 있다.

 

프론트엔드는 기술이 너무 빠르게 바뀐다. 트랜드가 빠르다. 

 

노션은 js로 일렉톤이라는 것으로 만들었다.

 

리액트 -> 리액트 네이티브 앱까지 만들순 있다.

하지만 할 수 있는 것과 쉬운건 아예 다른 이야기다. 

 

 

FE개발을 좀더 알아볼까요.

사용자가 서비스를 사용하는 UI

사용자가 공기처럼 사용하는 제품을 만든다. 

굉장히 자연스럽게. 

 

• 문제를 해결하는 제품을
• 적정 기술로 구현해서 
• 빠르게 출시 - 이를 위해서 적정 기술을 잘 선정하는게 중요

 

FE는 사용자와 밀접하게 맞닿아있는 UI UX를 만들기에 꽤 많은 고민이 필요하다.

 

 

1. 문제란? - 문제를 해결하는 제품을

사용자에게 필요한것 = 사용자의 목표(goal)

 

사용자가 그 문제를 해결했을때 무엇이 달성되냐.

 

실수로 열쇠를 차에 두곤 하는 저

저의 문제와 그 해결책은?

 

fe의 역량.차키를 차에 두고 내렸을 때. 

다시 트렁크 문이 열린다. 

 

사람다루는 거 좋아하고 디자인 ui에 대해 관심이 많다면 굉장히 재밌을 수 있는 영역

 

자판기에서 UI와 시스템은 각각 무엇일까.

 

사용자가 액션을 취한다. 

 

인터렉션이란?
사용자가 액션을 취하고 시스템이 처리해서 반응을 내뱉는것

이것이 인터렉션

- 시스템과 사용자가 대화

 

익셉션 , 에러 핸들링. - 커피 분말이 있는지, 물이 있는지, 컵이 있는지, 거스름돈이 있는지.

 

고작 자판기가 돈 하나를 받았을 때 만해도 이렇게 해야할 할

 

사용자와 인터렉션을 깊이 이해해야한다.

 

프로덕트헌트 사이트 

-스타트업이 제품 홍보하는 사이트 - 참고할 만한 정보가 많다.

https://www.producthunt.com/

Product Hunt – The best new products in tech.

 

UI, UX

어떤게 문제에 더 포커스되어있는지 

어떤게 더 좋은 UI인지는 모르지만

 

나도모르게 쓴다.

 

토스뱅크, 토스증권은 꼭 써봐라. 정말 잘만들었다.

 

사용자가 공기처럼 사용하는 제품?

이쁘고 보기 좋은 것이 아니라
자연스럽고 쉽게 문제를 해결하는 것!

 

 

내가 만들다보면 나도모르게 문제있는 부분을 피해간다.

사용자의 문제를 머리 속에 박는 연습을 해야한다. 의식적으로 해야한다.

 

 

매개체를 잘만드는 일 어렵습니다.

사람은 매개체 UI를 통해 시스템과 대화한다.

각자의 경험 지식에 따라 매개체를 다르게 해석한다. 

 

하지만 공통의 규칙은 존재한다!

 

사람이라는 동물은 어떤 특정한 행동에선 같은 행동등을 한다 공통의 규칙

 

30초동안 머그잔에 든 뜨거운 커피를 그려볼까요?

매개체를 각자 다르게 이해하지만! 모두 비슷하게 그린다!

 

휴먼 팩터, 인지 심리학

 

 

 

2. 적정 기술로 구현해서

 

사용자가 기다리는 것은 수치. 방망이 깍는 심정으로 0.01초와 싸웁니다. 

 

타이밍 API, 네비게이션 API 

 

웹이니까 속도가 중요하다. 

 

최적의 로직을 찾기 위해서 CS지식은 기본이고 여러 도구로 성늘을 측정하는 끝없는 개선

 

이 격차를 어떻게 메꿀건가.

CS 전공자와 아닌 우리가. 면접에서 들을 질문.

 

전공이 아닌 분에게 자주 묻는. 얼마나 개발자로서의 각오를 묻기 위한. 어느 정도 정답은 있다. 

 

백엔드는 얼마나 빨리 쏴주는지.
프론트는 얼마나 빨라 보이게 사기를 치는지.

 

 

변경사항적용 3500ms -> 200ms

 

이런 변경사항을 만드는게 전부 cs지식에서 온다.

 

UI의 숙명 = 잦은 변경 + 사용자에게 바로 노출되는 버그

 

피라미드 of test

UI tests (2toe test)

integration tests

unit tests

 

위의 이요로 정말 많은 테스트를 진행하고 이를 자동화한다면 크게 도움된다. 2toe테스트

 

 

 

3. 빠르게 출시

 

디자인을 OS별로 구현 > metafile을 기반으로 디자인 동적 생성.

 

시간이 돈이니까.  

 

atomic design sysytem

 

컴포넌트 재활용! 

디자인 -> 개발 프로세스 최적화 + 개발 시간 단축

 

빠르다 반대 커스터마이즈어블 

무엇을 선택하느냐는 회사의 선택..

 

1px단위로 바꾸고 싶은 욕구

 

fullstack 개발 서버에서 브라우저까지 개발해서 개발 효율성 + 비용 최적화 

하지만 열라 어렵다. 하지만 한번 마스터하고 나면 미래가 황금빛

 

제품 특성에 따라 fe와 BE를 나누는지 full stack으로 하는지

 

엤날엔 FE BE가 다를 수밖에 없다. 언어가 달라서. 

하지만 요즘은 js

 

스타트업은 시간과 비용이 생명. 

 

요즘 스타트업 씬은 풀스택을 많이 찾는다. 

 

😃최신 트랜드

 

노코드로 2주만에 disquiet 아이디어 검증하기.

노코드가 트랜드가 되고 있다. 

코어는 언어로 코딩을하지만 쉬운 영역은 노코드 로 하면서 빠르게 개발해버릇해야한다.

 

gpt3 - copilot !

 

 

 

 

네이버에서의 fe개발자.

 

NAver는 fe를 사랑한다.

 

 

AI 서비스 사용화의

 

툴이 ai의 서빙 게이트가 된다. 

- ex 스마트 에디터

 

 

 

저희가 생각하는 좋은 개발자는 어떤 분일까요? - 자소서 관련

 

❌react 를 몇년간 사용했어요 

 

⭕ xx프로젝트의 yy한 특성을 극복하기 위해 react를 사용했습니다.

 

 

다들 똑같은 실수를한다 프로젝트 10걔? 아무의미 없다. 10개를 똑같이 했으면 똑같은 사람.

프로젝트 마다 발전하는 면모가 보여야한다.

 

 

❌저는 정말 개발을 잘하고좋은 개발자로 성장하고 싶습니다.

 

⭕좋은 개발자로 성장하기 위해 xx프로젝트를 진행했고 github에 주기적으로 커밋합니다.

 

 

❌x년동안 다른 분야에서 전문가로 활동했고 개발자로 전향했습니다. 

 

⭕x년동안 z,y프로젝트의 성공을 위해 xx의 노력을 했고, qq의 성과를 거두었습니다. 이제 새로운 산업을 경험하기 위해 개발자로 전향했습니다. 

 

-어떤 문제 해결 경험을 했고, 그것을 다시 개발자로 거듭나는 

 

개발자가 되려면 뚜렷한 목표의식을 가지고, 이렇게 발전할 거야하는 자기 주도적인 자기동력이 있는지를 볼 수 밖에 없다.

 

왜냐하면 개발자는 스트레스가 많은 직업이기에 나중에 뻣는다. 공무원처럼 개발자를 준비하지 말아라. 그 어려운 것을 나는 즐긴다.

 

개발을 좋아할 자신이 있으면 개발자가 되라. 쉬운 길이 절대 아니다.

 

 

좋은 개발자란

• 사용자의 문제를 해결하기 위해
• 치열하게 고민한 해법으로
• 적절한 기술을 활용하여
• 시장이 원하는 시점에 제품으로 출시하는 개발자.

 

 

이건 좋은 개발자고 좋은 신입개발자는

 

• 탄탄한 기본기를 바탕으로 
• 빠르게 기술을 습득하는 분

 

뒤쳐졌다면 (컴공 전공자 대비) 어떻게 따라잡을 지 - 기본기 - 증명 러닝 커브가 있음을 증명해야한다. 

 

개발을 당장은 못할 수있지만, 발전 가능성을 증명해야한다.

 

게임 미래 몽상 - 나를 설명하는 명사 3개 - 이 세개가 자기소개서에 들어가는지 

잘 고민해봐라 이는 30초만 걸린것이다.

 

 

내가 좋은 개발자라고 말하고 싶다면

• 열심히 공부하는 것은 기본
• 개발이 재미잇고
• 치열하게 고민하고 있다는
• 반복적인 증거가 필요하다.

 

46살 이사도 10시까지 일하고 새벽 3시까지 gpt에 대해 공부한다. 

 

평생 학습해야 후배한테 따라잡히지 않는다. 

 

여러분의 문제

좋은 개발자가 되고 싶다는 것

 

 

 

 

QnA

내가 나를 잘모르겟다

 

친구들에게 물어본다. 안친하면 좋은 말만해준다. 가족 ㅉ찐친

나는 누구냐. 장점 단점을 물어본다.

노하우 1. 물어보기

노하우 2. 글을 적어본다. 내가 아는 것을 정리해본다. 

인터렉션등의 개념을  설명하기위한 객관화.

그런 냉혹한 평가를 내려줄 수 있는 지인이 잇는게 정말 중요하다. 

게으름을 극복하기위해 파워포인트 공부를 많이 했다.

 

 

말을 잘하는 법. 모르겠다. 

이건 확실하다. 발표 시키기, 발표 많이 해보기. 

 

개발이 재밌고 즐겁다?

매일매일이냐? 그건 아니다. 

+ -를 sum해보면 +다.

내가 만든 걸 남들이 좋아할때 짜릿하다. 그런 부분들이 나를 계속 하게만든다.

그렇기에 내가 재밌어하는 부분을 하는게 좋을것이다. 

 

 

면접 : 사례 꿀잼. 

일반적인거 : 키르키스탄 카이스트 출신 개발자. 스마트 데이터 뽑아왔다.? 

여러 뻔한 장점들이랑 다른. 내가 얼마나 네이버, 그 회사에 특정 영역의 장단점을 잘 이해하느냐. 지금 실력은 중요하지 않는다. 열정이 이그이글 타오른다 싶으면 그냥 뽑는다. 그정도로 준비했나? 그회사에 대해서. 

그회사엗대해서 해정과 관심이 있어야하고, 그것을 보여줘야한다.

 

 

 

개발자 바닥은 너무 쫍기에 파이가 커지면 좋다.

 

 

 

파이썬 c 나만의 무기. 새로운 기술 배울 때 접근 방법.

사람마다 다르다.

1. 나는 일단 만들어본다. 

todomvc 사이트 가 있다.

일단 만들어보는 사이트

원리보다 구현 위주로 접근하기에 안좋은 면이 있다. 

공식문서를 읽는게 좋은지. 일단 구현해보는지, 책 디립다 보는. 어떤게 좋은지는 케바케고 본인이 안다.

 

책의 지론 책은 장식품이다. 2번쨰 평생 그책은 한줄만 봤으면 다 ㅇ릭었다.

 

서점가서 책을 봤는데 두번은 읽을거 같으면 사라. 

나랑 친한 책 사기.

 

 

 

신기해서 공부한다. 

좀만잇으면 ai가 우리 코드를 대체할것같다.

흥미랑 재미가 있어서 공부는 누구나 한다. 

-집중도 있게 잘 배워내고 싶어서-

 

 

 

새로운 기술에 대한 정보 소스

좋은 사람들이 주변에 있으면 알아서 알려준다.

그래서 좋은 회사 가는게 좋다.

그 분야의 헤드를 찝어두면 sns를 그럼 계쏙 알려준다. 

뉴스레터로 알 수도 있다.

구글 weekly 뉴스레터 시리즈를 구독하면 된다. 

 

 

smashing mazgine . com 이라는 사이트

다있다. 다용한 잡다한 관심, 지식들을 백업해주는 사이트다. 

주로간느 정보 사이트가 있어야한다.

 

noun project .com 이라는 아이콘 사이트

 

사이트는 잘 찾고 잘 기록 북마크해둬라.

 

트랜드는 알 수 있지만 정확히 어떻게 될지는 모른다. 

 

현실보다 가상공간에서 더 많이 하게되면 메타버스다. 좋은 예시 유투브. 현재는 스마트폰으로.

 

남들 이해하듯이만 이해하진 말고 좀 더 고민해봐라.