안녕하세요 저는 브라우저를 여행하는 프론트엔드 개발자 김강현입니다.

어떻게 하면 제작 시 더욱 편리하게 만들 수 있을 지 생각하고,

누구에게 어떤 문제를 해결하기 하기 위해서 방법을 찾고,

흥미로운 프로젝트를 많이 시도하여 사람들에게 즐거움을 줄 수 있도록,

최종적으로는 미래에 공장장이 되어 누구나 기술을 사용할 수 있게 저렴하게 보급하는 것이 꿈인 개발자입니다.

경력

랜딩 (25. 5. ~ 현재)

• RimoAI (25. 5.~) 이미지 생성 기술을 이용하여 인테리어 업체들이 고객과 견적을 작성할 때, 초안 시각 자료용으로 빠르게 상담하기 위한 플랫폼을 제작했습니다.

1. 서버 간 환경과 환경 변수를 맞추기 위해 monorepo 방식을 활용하여 빠르게 서버를 구축하였고, 개발 인력 간 환경 변수 공유를 위해 비용이 나가는 dotenv 대신 자체 제작한 landinginc cli npm 패키지를 활용하여 환경에 따른 환경 변수를 올리고, 공유하고, 받을 수 있도록 하였습니다. 공용 패키지를 제작하여 자주 사용하는 인터페이스나 훅, 함수를 정리하여 재사용성을 높였습니다.
2. 동료와의 개발 스크럼 시간을 통해 작업 진행 상황과 제작 중 문제 상황을 빠르게 해결하고, 제품을 만들고 있는 데 놓치고 있는 부분이 어떤 것인지 찾아 더 나은 제품을 만들 수 있도록 논의를 거치며 해결책을 찾을 수 있었습니다.

• 사용 기술 Remix, monorepo,
• 3D 인테리어 프리뷰 프로젝트 (25. 5.~25. 6.) Three.js 기반 라이브러리를 이용해 가구 데이터와 방 치수 정보를 받아 방을 제작할 수 있으며, 벽과 바닥과 상호작용으로 실제 자재를 텍스쳐로 사용할 수 있도록 기능을 제작했습니다.

1. 고급스럽게 보이기 위한 조명 & 그림자 효과와 유리+거울 반사 효과, 안티 앨리어싱 효과 삽입으로 발생한 올라간 GPU 점유율을 줄이기 위해 빛 인스턴스 갯수 축소, 그림자 단순화 & 번짐 효과를 이용해 필요한 리소스를 줄여서 점유율을 80%대에서 40% 대로 줄여 모바일에서도 60fps로 쾌적하게 사용할 수 있도록 개선했습니다.
2. 파일 구조에 FSD 구조를 도입하여 3D 뷰어를 가지고 올 때 유지 보수성을 높였습니다. 도커 파일을 이용해 필요한 요소를 정의하여 배포를 할 수 있도록 했습니다.

• 사용 기술

  Remix, Next.js, Three.js, R3F(+ drei), zustand, Git, Docker

유어라운드 (24. 10. ~ 24. 11.)

프론트엔드 엔지니어 인턴으로 근무하여 Genbler의 웹 페이지를 제작하는 데 도움을 주었습니다.

팀 프로젝트

가물펑, 멀티 플레이 지뢰찾기 게임(24. 11. ~)

https://gamultong.github.io/gamulpung-client

https://github.com/kimgh06/Insam_Front

• 개요 브라우저에서 멀티플레이로 즐길 수 있는 지뢰찾기 게임입니다. 기본적인 규칙은 일반 지뢰찾기와 같지만 이동을 할 수 있고 다른 유저와 상호작용이 가능합니다.

  무한히 확장되는 지뢰밭 맵에서 미개척지에 깃발을 꽂아 자신의 색상으로 영역을 표시하며 세력을 확장하는 게임입니다. 이 프로젝트에서 기획과 프론트엔드 담당으로써 작업했습니다. canvas api를 통해 그래픽과 이동 로직을 구현하여 이용자가 게임에 몰입할 수 있도록 했습니다.

  또한 이 프로젝트를 오픈 소스로 운영할 수 있도록 사이트 내부에서 문서를 볼 수 있도록 하였습니다.

• 배경

  무한으로 뻗어가는 맵과 유저의 상호작용을 통해 대규모 트래픽을 관리할 수 있는 환경을 만들고, 단순히 지뢰 찾기를 온라인으로 만드는 것이 아닌 형식만 빌린 오리지널 프로젝트로 제작하기 위해 기본 엔진을 현재까지도 계속 다듬고 있습니다.

• 경험 팀을 이끌어 가면서 학교 내부에서 베타 테스트까지 진행하여 38709개의 트래픽을 받았고, 설문 조사를 통해 피드백을 받아 프로젝트를 개선 시킨 경험이 있습니다.

• 문제 해결

  1. 렌더링 속도 저하로 인한 경로가 밀려나서 보이는 현상.

     경로 그리는 데에 문제가 있는 줄 알았으나 타일이 얼마 없을 때에는 경로가 밀려나지 않는 모습을 확인하고 타일을 그리는 데에 시간이 오래 걸려 생기는 문제라는 것을 깨달음.

     원인을 찾아보니 ctx.fillrect를 사용해서 타일을 그리고 있었으나 타일이 여러 개 있을 때에는 효율이 좋지 못한 방법인 것을 알게 되었습니다.

     path를 미리 캐싱을 해놓고 필요할 때마다 해당 위치로 찍어내는 방식을 활용해서 렌더링 방식을 바꾸었더니 렌더링 시간이 전보다 1/3의 시간으로 줄인 것으로 해결하였습니다.

  2. GIthub Action 환경에서 시크릿 키 저장 오류 발생

     깃허브 액션을 이용해서 자동 배포를 사용하던 도중에 새로 추가된 환경 변수가 Secret에 있지 않고 Environment에 저장되어 깃허브 액션 환경에서 조회하지 못해 저장된 문서를 받아오지 못하는 문제가 생겼고, 다시 Secret 키에 맞게 설정해서 이 문제를 해결한 적이 있습니다.

  3. 렌더링 엔진 교체 기존 엔진은 cpu만 사용하여 다른 하드웨어 자원을 전혀 사용하지 않는 것을 알게 되었습니다. 다른 하드웨어 자원을 사용하기 위해 WebGL을 사용하는 Pixi.js 라이브러리를 발견하였고, 기존 엔진에서 일일이 그리던 것을 더 편하고 빠르게 렌더링하도록 타일 그래픽을 렌더링하는 엔진을 Pixi.js 라이브러리를 활용하도록 엔진을 교체하였고, 또한 렌더링 속도를 더 빠르게 하기 위해 타일 교체와 타일 렌더링 모두 Promise 객체 병렬 처리로 진행하여 병목현상이 일어나지 않게 하여 30000개가 넘는 타일을 렌더링하는 화면이 더 부드럽게 움직이도록 처리하였습니다.

  4. 웹 소켓 통신 코드 단순화 웹 소켓 통신 중에 발생하는 연결 상태 관리 문제를 해결하기 위해 zustand를 이용한 상태 관리툴로 쉽게 연결 상태를 가지고 오고, 자주 사용하는 연결, 종료, 메시지 전달 기능을 함수로 미리 정의해두어 중복 로직을 제거하였으며, 예측 불가능한 버그 발생 횟수를 낮추고, 최종적으로 코드 가독성을 높여 다른 사람이 읽기에도 좋도록 코드 구조를 개선했습니다.

  5. 메모리 과점유 문제 해결 타일 캐싱이 자주 발생하다보니 메모리 과점유 문제가 발생했습니다. Lookup Table(LUT) 기반 최적화를 적용해 타일의 상태를 256개 바이트 사전 매핑으로 처리, 비트 연산과 조건문 반복을 제거하고 O(1) 접근으로 전환했습니다. 체커보드 패턴과 깃발 색상도 LUT에 포함시켜 기존 메모리 점유율의 20%로 낮추게 되었습니다.

• 사용 기술

  WebSocket, Pixi.js, Canvas API, zustand, Github action