인트로
얼레벌레 시작한 인프콘 한국사람들은 상당히 부지런하다. 일찍 도착했다고 생각했는데..
오전 10시부터 행사 시작이라 여유있게 9시 40분에 현장에 도착하였다.
나름 일찍 도착했다고 생각하며 등록부스로 가니 생각보다 줄이 없어 바로 프리패스했다.
하지만 나는 일찍간게 아니라 늦은 축에 속하였고, 이미 많은 사람들은 스탬프투어를 부지런히 돌고 있었다.
9시부터 부스 오픈이라고 할때부터 눈치챘어야 했다.
입장하니 각 기업별 부스가 있었고 참가기업은 다음과 같다.
참가기업 소개를 보니 Forest, Tree, Leaf 로 나눠두었는데 투사준으로 받은건지 뭔지 잘 모르겠다.
Forest 현대자동차
Tree 엔라이즈, 요기요, 29cm, 사람인(점핏)
Leaf 헤렌, 젯브레인스, 카카오뱅크, 메가존클라우드, MongoDB, 드림어스컴퍼니, 카카오페이, 무신사
역시나 현대자동차의 줄이 제일 길었고 내가 얼타는동안 다른사람들은 부지런히 줄을 서고 있었다.
나도 한 굿즈 욕심있는 사람이라 정신 바짝 차리고 눈에 보이는 줄 중에서 가장 짧은 줄을 선택했다.
정식 세션은 아니지만 10시부터 인프콘 개최발표가 있어 스태프들은 입장해달라고 했고 나는 엔라이즈와 무신사의 스탬프 & 굿즈를 받고 입장했다.
인프콘의 포문은 인프런의 CEO 이형주님이 열었다.
너무 바들바들 떠시는게 보여 힘내라고 말해주고 싶을 정도 .. 의 스피치였지만 수많은 사람들 앞에서 말하는게 얼마나 떨릴까 감정이입된 순간이었다. (극 F 특.)
주로 인프랩의 사업적인 성장수치를 말씀하셨다.
다음 바톤을 이어받은 유명한 향로님.
인프런의 인재채용플랫폼 랠릿의 CTO 로서 이룬 성과들과 랠릿의 미래에 대해 개발자,기획자의 관점에서 소개를 해주셨다.
수많은 채용시스템들 중 랠릿만 가지고있는 차별점에 대해 소개하시고 (커피챗 제안하기라던가), UX를 전면 개편하며 더 편리한 고객경험을 위해 힘썼다고 하셨다.
사람들의 니즈를 명확하게 파악하고 그것을 뚜렷한 성과로 이끄는 것을 보며 그저 대단하다는 생각밖에 들지 않았다.
굿즈 여정기
우당탕탕 스탬프 받기 첫번째 세션을 과감히 포기하다
무슨 생각이었는지 모르겠지만 시간표에 제일 많이 담아두었던 첫번째 세션을 통으로 포기하기로 마음을 먹었다.
“굿즈를 얻기 위해.”
세션은 영상으로 다시 볼 수 있지만 떠나간 굿즈는 돌아오지 않기 때문이다.
하지만 열한시에 시작하는 두번째 세션부터는 반드시 들어야 했기에 약 40분간 부지런히 돌아다녀야 했다.
눈치껏 제일 인기있을것같은 기업인 요기요, 카카오페이, 카카오뱅크 등 순회공연을 돌아다녔다.
룰렛이나 뽑기 등 설문조사만 하면 참여기회가 있었는데 워낙에 똥손인지라 짜친 굿즈들 콜렉터가 되었다.
본격! 세션 참여
이제 본격 세션을 들어보자 다시 구성한 타임테이블
앞서 내가 짜둔 타임테이블대로 간다면 중복되는것이 많기에 현재 나에게 제일 도움이 되고 필요할것을 위주로 추렸다.
이 글에서는 아무래도 세션만 듣고 Deep 하게 쓰기에는 무리가 있어 세션 요약 및 느낀점 위주로 작성할 예정이고,
자세한 내용들은 공부 후 하나씩 따로 작성하려고 한다.
1. Turborepo, Next.js, TypeScript를 이용한 프론트엔드 모노레포 적용기
주식회사 홉스의 프론트엔드 분께서 진행하는 세션이다.
홉스라는 회사는 처음 들어봤는데 비전공자도 쉽게 구성할수 있는 “어드민 빌더” 시스템을 운영하는 회사다.
우리회사도 큐샵의 어드민을 직접 구축하고 있기 때문에 어떻게 모노레포를 접목하여 효율적인 시스템을 구축했는지 더 궁금해졌다.
홉스는 왜 모노레포를 선택했을까?
모노레포의 정의를 말하자면, 단일 레포지토리에 여러개의 서브 프로젝트가 존재하는 방식이다.
이 모노레포에는 서드 파티나 라이브러리 또는 여러 다른 프로젝트와 기술로 구성될 수 있어,
하나의 제품에 필요한 패키지를 여러개 만들어야 할 때 적절한 대안이 될 수 있다.
홉스는 홉스의 개발자시점, 홉스를 통해 백오피스를 만드는 고객사의 개발자시점, 홉스를 통해 백오피스를 운영하는 운영자 시점 총 세개의 시점이 존재한다고 한다.
여러 시점이 있다는 점에서 큐샵의 어드민페이지와 비슷하지만 “홉스로 개발하는 고객사의 개발자”를 위한 UI 가 별도로 제공되어야 한다.
이 UI 를 제공하기 위해 고려되어야 할 사항은
- 공통적으로 쓸 수 있는 디자인 시스템이 적용되어야 할 것
- 해당 UI 는 추후 라이브러리로 배포될 수 있어야 할 것
- 컴파일을 통해 리액트로 코드를 추출할 수 있어야 할 것
이었다.
모노레포 하나를 잘 구축해 두면 앞으로도 공통으로 쓰일 많은 패키지들을 단일레포로 관리할 수 있어 관리 코스트의 이점을 생각하여 채택하게 되었다고 한다.
왜 Turborepo 일까?
이 부분은 모노레포에 대한 베이스 지식이 많이 없기 때문에 100% 다 이해하진 못했지만 그동안은 Yarn, Lerna, Nx 등을 썼다고 한다.
하지만 홉스는 Next.js + Typescript 기반의 기술을 사용하고 있고 Next.js 에 최적화 된 모노레포 빌드 시스템이 필요했다.
누구나 알다시피 Next.js 는 Vercel 에서 만든 프레임워크이기 때문에 Vercel 에서 인수한 Turborepo는 Next.js 에 최적화 되어있다고 말할 수 있다.
그 외에도 Turborepo 가 복잡한 빌드시스템 구축을 대신 해주기 때문에 스크립트에 몇줄 추가하는것으로 설정을 완료할 수 있고, ⇒
복잡성 완화한번 수행한 작업은 동일할 경우 다시 수행하지 않는 특성 때문에 빠르게 빌드가 가능하여 최종적으로 선택했다고 한다. ⇒
캐싱 최적화
물론 단점도 있다고 한다.
여러개의 패키지를 하나의 레포로 사용하기 때문에 패키지 버전 관리가 힘든 부분이 있다고 한다.
이 부분에 대해 Yarn berry 로 해결했다고 언급만 하시고 자세한 해결방법은 말씀해주지 않으셔서 상당히 궁금했다는 ..
역시 모든 개발에는 장,단점이 있구나 깨달았다.
큐샵도 홈페이지, 어드민, 라이브 세개의 프로젝트에서 동일하게 쓰고있는 패키지와 UI 가 상당히 많다.
UI 만 따로 레포를 파고 패키지로 만들면 어떨까 생각하고 동료들에게 공유한 적은 있었는데
패키지가 겹칠때도 모노레포를 사용할 수 있는지는 처음 깨닫게 되었다.
언젠가 큐샵의 고도화가 진행된다면 서로의 개발적인 발전을 위해서 시도해보고 싶다는 욕심이 들었다.
2. 왜 내가 만든 서비스는 아무도 안 쓰지?: 개발자가 알아두면 좋은 사이드 프로젝트 제작 팁
유퀴즈에 출연한 경험이 있으신 이동훈님의 세션.
그 유명한 코로나 앱을 이분이 만드셨다고 한다.
스퀘어스 주니어들끼리 진행한, 추억속으로 사라진 “배듀” 뿐만 아니라 내가 진행한 사이드프로젝트는 왜 끝맺지 못했을까 를 상기시키며 해당세션에 임했다.
좋은문제를 찾고, 이해하고, 해결하기
우리가 사이드프로젝트를 할 때 항상 실수하는것이 있다.
바로 “솔루션을 먼저 정의하고 고객을 끼워 맞추는 경우”
가령 기술스택을 먼저 채택하고 그 안에서 가능한 해결방법을 찾기 위해 우리는 노력하지만 다음의 세가지를 기억하고 접근해야 한다.
- 반문하기 : 항상 왜? 라는 의문을 가지고 답해보는 단계
- 관찰하기 : 기존의 프로세스들은 어떻게 이루어지고 있는지 관찰하는 단계
- 펼쳐보기 : 왜 이런 현상들이 발생을 했고 어떤점을 개선할 수 있는지에 대한 포인트를 찾는 단계. 시장의 크기까지 넓다면 더할나위없이 좋음!
위의 접근방식을 토대로 코로나맵을 만들때 예시를 들어주셨다.
어떤 유저가 페이스북에 다음과같은 댓글을 남겼다.
@승원 오늘 오후 3시에 서울역에서 확진자가 나왔대.. 진짠가 .. ?이 한줄의 댓글에서 파악할수있는것은
1. 불안감을 남들과 공유한다. ⇒
@승원
2. 위치와 시간에 대한 정보를 알고 싶어한다. ⇒오늘 오후 3시에 서울역에서
3. 정확한 정보를 찾을 수 없다. ⇒ 진짠가 .. ?남들은 그냥 넘길법한 정보 혹은 댓글 하나하나에 의문을 제기하며 해결하려고 하는 생각의 전환이 너무 신기했다.
가능한 짧은 시간내에 완성하기
사이드프로젝트는 시간을 끌면 끌수록 동기부여가 감소하기 때문에 최대한 애자일한 방식으로 빨리 끝내는것이 중요하다고 한다.
프로젝트 규모에 따라 3개월에서 6개월 안에는 쇼부를 봐야한다는 소리!
배듀는 1월부터 시작하고 5월에 흐지부지 되었는데 규모가 작은 프로젝트였음에도 불구하고 애초에 여유있게 하시죠! 라는 마인드로 시작한것이 문제였던 것 같다.
사이드 프로젝트 특성 상 완성하지 않으면 쏟아부은 시간이 허비되는 경우가 많다.
그렇기때문에 어떻게 해서든 (지금 큐샵이 팔다리 없이 런칭하려고 하는것과 비슷하게) 완성은 하고 결과물을 내려고 노력해야 한다.
만든여정을 기록하기
누구나 알고있지만 실천하기 힘든 바로 그것, 기록이다.
이전 PPT들은 간략하더라도 요약된 텍스트로 작성되었는데 이 부분만큼은 “기록” 단 두 단어로 깊은 울림을 주었다.
그만큼 중요하다는 뜻이겠지.
기록할 때 다음 세가지를 반드시 포함하는게 좋다.
- 어떤 문제를 어떻게 해결했는지
- 어떤 기술스택을 왜 사용했는지
- 어떤 결과가 있었고 얻은점은 무엇인지
사이드프로젝트 뿐만 아니라 어떤것에 대한 기록을 할 때 특히 1번과 3번은 템플릿화 하여 쓰려는 노력을 해야할 것 같다.
항상 “왜” 라는 반문을 통해 답을얻고 성장하기!
작은시도, 작은실패, 작은성공 ⭐️⭐️⭐️⭐️⭐️
3. Hello, Interactive Developer: WebGL로 아트코딩 하기
“웹에서 아름다움을 코딩” 하는 문구에 확 끌려 최종 타임테이블에 추가하게 된 세션이다.
네이버웹툰에 다니시는 이유윤 스피커님은 특이하게 연극전공 출신이다.
예술전공자 답게 Three.js 로 구현한 작품 하나하나가 예술 그 자체 였고 세션 내내 입을 벌리고 보게 되었다.
소개동영상넣기 (용량부족으로 못넣음 ㅠㅠ )
프론트엔드 개발자의 커리어패스
아마 한번씩 고민을 해봤을 커리어패스.
프론트엔드의 경우 다음과 같은 도메인을 가지며 경쟁력을 키울 수 있다.
- 대시보드 개발 : 대시보드나 커머스 등의 서비스 개발
- 저작도구 개발 : 피그마나 포토샵과 같은 에디터 개발
- 데이터 시각화 : D3와 같은 차트 라이브러리를 이용해 통계 데이터를 시각화 하는 개발
- 블록체인 개발 : Solidity 로 이더리움 기반의 블록체인 DApp 개발
그리고 여기에 바로 창의적이고 예술적인 사이트를 개발하는 “인터렉션 개발” 도메인이 있다.
해외에는 그래픽을 기술적으로 구현하는 테크니컬 아티스트라(TA)는 직무가 제너럴 하지만 아직 우리나라에는 그렇진 않은것같다.
( 프론트엔드라면 한번쯤 봤을법한 구글에서 입사제의 받은 유튜버, Interactive developer 가 테크니컬 아티스트이다. )
WebGL 작업과정
MDN 에서 정의하는 WebGL 은
HTML 의 캔버스를 기반으로 하여 별도의 플러그인을 사용하지 않고 3D 웹 콘텐츠 제작을 가능하게 만드는것이다.
대부분의 주요 웹 브라우저(Chrome, Firefox, Safari, Edge 등) 에서 지원한다.
이미 Three.js , BabylonJS와 같이 WebGL 을 기반으로 한 라이브러리가 나와있어 그냥 갖다 쓰기만 하면 된다고 하셨지만
적어도 WebGL 이 무엇인지, 간단하게 개념은 알 필요가 있기에 간단히 작업과정에 대한 설명을 해주셨다.
사진을 보다시피 뭔가 상당히 복잡한 매트리스 형식을 띄고 있다.
이런 매트리스 형식으로 그래픽을 렌더링 하려면 고성능의 벡터연산을 필요로 하기 때문에 웹 브라우저는 코어수가 제한된 CPU 보다 그래픽 가속기인 GPU 를 사용하는것이라고 한다.
WebGL 에서는 정점셰이더와 색상셰이더 두가지만 기억하면 된다고 한다.
말이 셰이더이지 그냥 함수라고 생각하면 될것같다.
셰이더함수를 작성할때는 JS 로 작성하는것이 아닌, C언어와 유사한 GLSL 이라는 언어다. GLSL은 그래픽 래스터화에 일반적으로 필요한 수학적 계산을 수행하도록 설계되어 있다고 한다.
정말 무궁무진한 언어의 세계..
이 점을 색상으로 채우기 위해서 색상 셰이더함수가 사용되고, 이 함수에는 rgba 값에 해당되는 값이 들어간다고 보면 된다.
다만, rgba 는 0~255 사이의 숫자로 구성되어 있지만 이 값을 255로 나눈값이 들어가게 되있어 (1.0,1.0,0.0,1.0) 이런 형태의 값이 들어가게 되는것이다.
대충 이 점하나 찍고 색상을 채우는데 저 위의 정적셰이더와 색상셰이더 함수가 필요하다는 뜻.
정리를 하자면
- Canvas API 로 WebGL Context 를 가져온다.
- 셰이더 함수를 작성하여 WebGL Context 로 전달한다.
- GPU Process에서 WebGL 렌더링 파이프라인에 따라 각 픽셀이 계산된다.
Three.js 작업과정
WebGL의 작업과정에 대해 정말 간단하게 설명해주셨는데 너무 생소하다 보니 바로바로 이해하기 어려워 그렇구나~ 하고 넘어가는 수준에서 끝내야 했다.
하지만 괜찮다고 하셨다. 우리에겐 바로 Three.js 가 있으니 말이다.
많은 WebGL 라이브러리 중 대중적이고 레퍼런스도 많은 Three.js 의 작업과정에 대해서도 간략히 설명해주셨다.
camera 와 scene 메소드로 일반 2d 형태의 물체를 구성하고, (일반 이미지로도 가능) 우리가 원하는 3d 형태가 되기 위해서는 Mesh 메소드가 사용되어야 한다.
const mesh = new THREE.Mesh()그럼 이 Mesh 란 무엇일까?
판, 구, 박스, 실린더 등의 다양한 형태로 이루어진 Geometry 가 있으며 평면의 텍스처로 이루어진 Material 가 합쳐져 비로소 3D 물체 인스턴스를 형성할 수 있는것이다.
이 세가지의 메소드를 기본적으로 사용하며 훌륭한 아트그래픽이 코딩으로 탄생할 수 있는것이다.
WebGL 과 Three.js 를 처음 접하는 사람들에게 추천하는 코스 링크도 알려주셨다.
- https://three.js-journey.com ⇒ Bruno Simon 강의
- https://thebookofshaders..com ⇒ 셰이더 튜토리얼
- https://webglfundamentals.org ⇒ 기초 WebGl 가이드
- https://www.shadertoy.com ⇒ 셰이더토이 분석
참고로 Bruno Simon 아저씨는 Three.js 대가로 유명하신 분이라고 한다. 밑에 이아저씨임.
눈뽕타임
앞선 스피커 소개영상부터 개인 포트폴리오 전부 Three.js 를 통해 깊은 인상을 남기시더니 마무리 멘트대신 보여준 하나의 영상으로 화룡점정을 찍었다.
단순 모션이 아닌 화려한 아트워크가 가능하다는것을 알고 상당히 매료되었던 시간이었다.
확실히 이 분야는 코딩실력도 실력이지만 예술적인 감각이 뒷받침 되어야 한다는것을 또한 느꼈다.
예술적 감각은 없더라도 눈뽕에 매우 취약한 나.. Three.js 찍먹이라도 해봐야겠다.
