미리보기

• 치지직, Twitch, SOOP과 같은 라이브 스트리밍 서비스

• FE 2인, BE 2인으로 구성된 팀에서 주로 프론트엔드 개발 담당

• Git flow를 활용한 브랜치 관리, Github Projects를 활용한 일정 및 태스크 관리로 체계적인 워크플로우를 구축하고 경험

• 팀원 모두 함께 논의하며 서비스의 전반적인 아키텍처와 기술 스택을 근거 있게 선정함

  • 기존의 단일 미디어 서버를 다양한 입력 프로토콜을 처리하며 네트워크 자원을 많이 사용하는 인제스트 서버와 cpu 자원을 많이 사용하여 트랜스코딩을 수행하는 인코딩 서버로 분리

  • 채팅 기능의 서버 리소스 최적화를 위해 HTTP(전송) + Socket.IO(수신) 혼합 방식을 적용

  • 5주의 짧은 개발기간을 고려하여 익숙한 Zustand 전역 상태관리 라이브러리와 자동 비트레이트 등 다양한 기능들을 제공하는 HLS 프로토콜 선정

• OAuth를 활용한 소셜 로그인 기능을 구현하며 토큰 저장 방식에 대해 논의함

  • XSS 공격을 방지하기 위해 Access Token은 메모리에 저장하고, Refresh Token은 HttpOnly 쿠키에 저장하여 JavaScript 접근을 차단했으며, CSRF 공격 방지를 위해 SameSite 속성 설정(🔗)

• OBS, Prism Studio와 같은 외부 송출 프로그램을 사용하지 않고 텍스트 및 이미지 입력, 드로잉, 드래그와 리사이징 등 다양한 상호작용을 지원하며 브라우저에서 방송을 송출할 수 있는 웹 스튜디오 기능을 주도적으로 개발

  • 여러 상호작용이 의도한 대로 동작하고, 정적인 컨텐츠가 매 프레임마다 불필요하게 다시 그려지지 않으면서도 자원을 효율적으로 사용하도록 4개의 캔버스로 분리하고 합성하여 송출하는 아키텍처를 설계 및 구현

  • 여러 컴포넌트에서 공유되던 복잡한 상태를 Context API 대신 Zustand로 마이그레이션하여 가독성을 높이면서도 캔버스별 선택적 구독을 통해 불필요한 리렌더링을 방지함(🔗)

• 안정적인 실시간 방송 송출을 위해 매 프레임마다 불필요하게 반복되던 캔버스의 크기 계산 및 재렌더링 로직 개선, useRef와 useCallback을 활용한 렌더링 최적화, 마우스 상호작용 쓰로틀링 등 다양한 성능 개선 작업을 진행

  • X4 성능제한 환경에서 최저 프레임률을 30fps에서 50fps 이상으로 향상하여 프레임드랍 문제를 해결함(🔗)

• 방송이 송출중일 때 화면 공유 스트림이나 카메라를 변경하면 연결이 끊겨 방송이 의도치 않게 종료되는 문제

  • 단순히 캔버스를 합성하여 스트림으로 전송하는 이전의 구조 대신, RTCRtpSender를 사용하여 연결을 유지한 채로 스트림을 업데이트할 수 있도록 수정하여 해결함(🔗)

• 방송을 송출중이던 탭이 백그라운드 탭으로 전환시 브라우저의 최적화 때문에 캔버스를 렌더링하는 타이머가 멈추게되어 방송이 끊어지는 문제

  • PageVisibility API를 활용하여 포그라운드 탭에서는 requestAnimationFrame 타이머로 캔버스를 렌더링하고, 백그라운드 탭에서는 WebAudio API를 활용하여 무음 오디오를 재생한 뒤 그 오디오의 자체 타이밍 루프를 활용하여 렌더링 하도록 구현하여 해결함(🔗)

• 뇌졸중에서 가장 흔히 나타나는 증상인 얼굴 마비(Face), 팔 마비(Arm), 언어장애(Speech)를 자가진단 할 수 있는 어플리케이션

• FE 2명, BE 2명, 디자이너 2명으로 구성된 팀에서 프론트엔드 개발 담당

• 주도적으로 프로젝트 주제를 발굴하고 제안함

  • 초기 대응이 중요하지만 증상 인지가 어려운 뇌졸중의 특성에 주목했고, 이전 학부연구생과 컴퓨터비전 과목 프로젝트에서 얼굴 인식 및 포즈 추정 기술을 경험한 것을 바탕으로 “이 기술로 뇌졸중 초기 증상을 자가진단할 수 있지 않을까?” 라는 아이디어를 도출하고 팀원들을 설득하여 프로젝트로 발전시킴

• Google MLKit의 Face Mesh 모델과 Face Detection 모델을 활용한 얼굴 비대칭도 검사, Pose Estimation 모델을 활용한 팔 비대칭도 검사기능 개발

  • 처음 접하는 React Native 환경에서 Bridge 동작 원리를 이해하고 네이티브 언어(Kotlin, Swift)로 작성된 MLKit 모듈을 성공적으로 연동하는 아키텍처 구현(🔗)

• 사이드임팩트 공모전 스파크 트랙 선정

• 문화체육관광부와 한국컨텐츠진흥원 주관 프로젝트에 컴퓨터비전 학부연구생으로 참여

• HMD를 사용하지 않고 여러 사용자들이 한정된 크기의 현실공간에 설치된 XR CAVE(벽면에 프로젝션을 투사하여 만든 몰입형 가상환경) 기반의 가상공간을 군집 보행 기술을 활용하여 경험할 수 있는 프로젝트

• YOLOv7 모델을 활용하여 카메라에 포착된 사람을 파악하고 Openpose를 활용하여 사람의 발 좌표 검출

• 벡터 보간법과 흑백 패턴 체커보드를 활용하여 카메라로 감지된 3d 공간 좌표를 가상환경의 2d 좌표로 매핑

• Socket.IO 통신으로 실시간 좌표 및 방향 데이터를 Unreal Engine에 전송하여 시뮬레이션

• 3대의 카메라에서 실시간으로 프레임을 받아오는 데 발생한 지연을 멀티스레드, 버퍼 사이즈 줄이기, GStreamer 도입 등으로 약 1.9초 에서 0.15초로 개선

현업의 문제를 해결하기 위해 필요한 도메인별 기초 지식을 학습합니다.
짧은 프로그래밍 미션이 아닌 현업과 유사한 프로젝트 단위의 서비스와 기능을 구현합니다.
자유도를 기반으로 문제를 해석하고 구현하는 과정에서 스스로 판단하고 결정하며, 동료와 협업하는 연습을 반복합니다.

STUDY

• 수료 이후에도 동료들과 학습한 내용을 발표하며 질문과 피드백을 주고받는 스터디를 진행하고 있습니다.

• 단순한 학습에 그치지 않고 이를 바탕으로 기존 프로젝트에 적용해 개선하고 블로그에 기록하고 있습니다.

• 브라우저 내부 동작을 알아보자(🔗)

• V8 엔진 뜯어보기(🔗)

• 브라우저와 Node.js의 비동기 처리와 이벤트 루프(🔗)

• HTTP의 발전과정(🔗)

LICO

• LICO 프로젝트를 진행했습니다.

NewsStand

• Typescript | React | Zustand | Tanstack Query

• 반복되는 로직을 커스텀 훅으로 추출하고 컴포넌트의 역할과 책임을 명확히 분리한 아키텍처를 고민하며 구현했습니다.

• useCallback, useMemo를 활용한 최적화를 도입했습니다.

ReactCraft

• Javascript | Vite

• 리액트 패키지를 참고하여 리액트 내부에서 Fiber 아키텍처, Virtual DOM과 재조정 과정 등으로 DOM 렌더링이 어떻게 수행되는지 학습했습니다.

• 간단한 커스텀 리액트 라이브러리를 구현했습니다.

Taskify

• Javascript | Express.js | Vite | MySQL | AWS

• 바닐라 자바스크립트와 Express.js, MySQL을 사용하여 SSR과 CSR이 통합된 풀스택 웹 어플리케이션을 만들었습니다.

• ec2 우분투에서 PM2로 여러 프로세스에서 어플리케이션을 실행하였으며, nginx가 프로세스 접근을 제어하도록 했습니다.

• 짧은 시간에 도전적인 과제를 수행하며 컴퓨터 공학의 지식들을 프로그래밍에 적용했습니다.

• 저수준 프로세서 아키텍처를 직접 설계하고 구현하여 어셈블리어의 내부 동작 원리를 이해했습니다.

• 멀티스레드 기반의 택배 처리 시스템을 만들어보며 프로세스와 스레드 개념을 적용했습니다.

• 페이징 시스템과 가상 메모리 관리자를 구현하여 운영체제의 메모리 관리를 이해했습니다.

• C언어 스터디, 알고리즘 스터디 등에 참여하고 React 스터디를 주도적으로 진행했습니다.

• 후배들과 노졸중 프로젝트를 진행하여 사이드 임팩트 공모전 스파크 트랙에 최종 선정되었습니다.

• 컴퓨터 그래픽스 분야를 심화 학습했습니다.

• 컴퓨터 그래픽스 과목을 위한 Apple Silicon 칩에서의 OpenGL 실행 환경 실습 가이드를 제작했습니다.

• 문화체육관광부, 한국콘텐츠진흥원 주관의 컴퓨터 비전 프로젝트를 진행했습니다.

• 전임자가 프로젝트 초기에 나가게 되어 개발 경험과 컴퓨터 비전, 언리얼 엔진에 대한 사전 지식이 전혀 없는 상태에서 첫 프로젝트를 맡게 되었습니다.

• 공식 문서와 외국 유튜브 강의자료를 보고 사용법을 익히고, 공개된 코드를 변형해서 사용하고, 구글링과 생성형 AI, 스택 오버플로우를 활용하며 문제를 해결하고, 연구실 선배에게도 물어보고, 언리얼 엔진과 컴퓨터 비전 카페에도 가입하여 질문을 올리며 책임감과 끈기를 가지고 프로젝트를 진행했고, 결국 성공적으로 마무리할 수 있었습니다.

• 이 때의 맨 땅에 헤딩하는 경험으로 어떤 문제든 어떻게든 해결할 수 있겠다는 마인드셋을 가지게 되었습니다.