A few points that I want to mention after working in Coupang for 6 months as a Recommender system software engineer

Review - 6 Months in Coupang

쿠팡에서 추천 시스템 백엔드 엔지니어로 조인한지 6개월 차가 되었습니다.
다음 분기를, 내년을 준비하고자 지난 기간을 되돌아봅니다.

문화
자신의 상황에 따라 많이 차이가 있을 수 있으나, 제가 경험하고 느낀 바는 아래와 같습니다.

 * 사용자 문제에 기반
대부분의 주요 프로젝트는 사용자 문제에 기반하여 주도됩니다. 여러 데이터를 참조하여 문제를 정의하고, 해결하고자 하는 바를 기술하며, 성공과 실패(롤백)은 어떤 기준일지를 작성한 1-pager를 통해 변경 프로젝트가 시작되고 팀이 구성됩니다.

 * 실험 주도
문제 정의부터 성공과 실패의 정의 및 판단까지 모든 것은 데이터와 A/B 테스트를 기반으로 진행됩니다. 고도화되어 구현에 큰 비용이 발생하지 않는 A/B 테스트 플랫폼과 프로세스는 중요 핵심 자산으로 보이며, 그렇기에 모든 변경은 검증되어 개선이 인정될 때만 반영되고 그렇지 않다면 폐기됩니다.
(관련해 좋은 책, Ron Kohavi의 Trustworthy Online Controlled Experiments)

 * 문제를 소유하지, 도메인을 점유하지 않음
주로는 도메인 오너가 도메인에 대한 변경을 진행하게 되지만, 리소스가 없다면 도메인 오너의 가이드 하에 특정 문제를 해결하기 위해 도메인 오너가 아닌 컨트리뷰터가 기여하기도 합니다. 물론, 특정 도메인 서비스에 대한 운영, oncall 등은 도메인 오너가 진행합니다.

하지만, 어떤 문제를 어떤 구성원이 P0로 해결하는 중이라면 그 문제를 위한 변경은 도메인에 구애받지 않고 '급한 구성원'이 해결할 수 있는 기회가 비교적 열려 있습니다.

Self AAR (Review)
추천 시스템은 다른 백엔드 시스템과는 조금 다르게 내부적으로 헤비한 데이터(Data-Intensive) 처리가 존재하고, 그 데이터 처리에 기반한 모델을 서빙한다는 특징이 있습니다. 유사한 도메인으로는 검색, ML 서빙 플랫폼와 같은 것들이 생각되는데요.

그렇기에 엔지니어로 관여하는 부분은 모델링, 파이프라이닝, 서빙, 그리고 기본적인 운영과 같은 4가지로 구분할 수 있습니다.

저는 지난 160일간 대략적으로 파이프라이닝, 서빙, 그리고 운영에 관여하였습니다.

 * 파이프라이닝
특정 유저에 대해 특정 추천상품이라는 후보군들을 뽑아내기 위해 Offline으로 준비되는 데이터에 해당됩니다. Java, Scala, Python 등에 기반한 Spark으로 되어 있어, 일부 데이터를 추가하는 작업을 진행하였습니다.

 * 서빙
실시간으로 추천 위젯과 위젯의 상품 리스트를 응답하는 서비스입니다. 주로 다양한 업스트림을 Aggregate하는 패턴으로 다양한 아규먼트를 받을 수 잇는 GRPC 엔드포인트를 제공합니다.

 * 운영
모델링, 파이프라이닝, 서빙에 대한 유지와 모니터링이 해당됩니다. Spark 버젼을 마이그레이션하거나, AWS LB와 내부 클러스터 설정 구조를 변경하거나, CICD에 사용되는 서비스를 전사 정책에 따라 마이그레이션 하는 등의 작업을 진행합니다.

특징적으로는 Oncall이 일주일씩 로테이션이 되기에, Grafana alert에 따라 전화가 오면 핸들링하는 Oncall 프로세스를 진행하기도 합니다.

(원본: https://kadensungbincho.com/blog/backend/review-6-months-in-coupang)

쿠팡에서 추천 시스템 백엔드 엔지니어로 조인한지 6개월 차가 되었습니다. 다음 분기를, 내년을 준비하고자 지난 기간을 되돌아봅니다. 문화자신의 상황에 따라 많이 차이가 있을 수 있으나, 제가 경험하고 느낀 바는 아래와 같습니다. <ul ><li>사용자 문제에 기반</li></ul>대부분의 주요 프로젝트는 사용자 문제에 기반하여 주도됩니다. 여러 데이터를 참조하여 문제를 정의하고, 해결하고자 하는 바를 기술하며, 성공과 실패(롤백)은 어떤 기준일지를 작성한 1-pager를 통해 변경 프로젝트가 시작되고 팀이 구성됩니다. <ul ><li>실험 주도</li></ul>문제 정의부터 성공과 실패의 정의 및 판단까지 모든 것은 데이터와 A/B 테스트를 기반으로 진행됩니다. 고도화되어 구현에 큰 비용이 발생하지 않는 A/B 테스트 플랫폼과 프로세스는 중요 핵심 자산으로 보이며, 그렇기에 모든 변경은 검증되어 개선이 인정될 때만 반영되고 그렇지 않다면 폐기됩니다. (관련해 좋은 책, Ron Kohavi의 Trustworthy Online Controlled Experiments) <ul ><li>문제를 소유하지, 도메인을 점유하지 않음</li></ul>주로는 도메인 오너가 도메인에 대한 변경을 진행하게 되지만, 리소스가 없다면 도메인 오너의 가이드 하에 특정 문제를 해결하기 위해 도메인 오너가 아닌 컨트리뷰터가 기여하기도 합니다. 물론, 특정 도메인 서비스에 대한 운영, oncall 등은 도메인 오너가 진행합니다. 하지만, 어떤 문제를 어떤 구성원이 P0로 해결하는 중이라면 그 문제를 위한 변경은 도메인에 구애받지 않고 '급한 구성원'이 해결할 수 있는 기회가 비교적 열려 있습니다. Self AAR (Review)추천 시스템은 다른 백엔드 시스템과는 조금 다르게 내부적으로 헤비한 데이터(Data-Intensive) 처리가 존재하고, 그 데이터 처리에 기반한 모델을 서빙한다는 특징이 있습니다. 유사한 도메인으로는 검색, ML 서빙 플랫폼와 같은 것들이 생각되는데요. 그렇기에 엔지니어로 관여하는 부분은 모델링, 파이프라이닝, 서빙, 그리고 기본적인 운영과 같은 4가지로 구분할 수 있습니다. 저는 지난 160일간 대략적으로 파이프라이닝, 서빙, 그리고 운영에 관여하였습니다. <ul ><li>파이프라이닝</li></ul>특정 유저에 대해 특정 추천상품이라는 후보군들을 뽑아내기 위해 Offline으로 준비되는 데이터에 해당됩니다. Java, Scala, Python 등에 기반한 Spark으로 되어 있어, 일부 데이터를 추가하는 작업을 진행하였습니다. <ul ><li> 서빙</li></ul>실시간으로 추천 위젯과 위젯의 상품 리스트를 응답하는 서비스입니다. 주로 다양한 업스트림을 Aggregate하는 패턴으로 다양한 아규먼트를 받을 수 잇는 GRPC 엔드포인트를 제공합니다. <ul ><li>운영</li></ul>모델링, 파이프라이닝, 서빙에 대한 유지와 모니터링이 해당됩니다. Spark 버젼을 마이그레이션하거나, AWS LB와 내부 클러스터 설정 구조를 변경하거나, CICD에 사용되는 서비스를 전사 정책에 따라 마이그레이션 하는 등의 작업을 진행합니다. 특징적으로는 Oncall이 일주일씩 로테이션이 되기에, Grafana alert에 따라 전화가 오면 핸들링하는 Oncall 프로세스를 진행하기도 합니다. (원본: https://kadensungbincho.com/blog/backend/review-6-months-in-coupang)

Kaden Sungbin Cho

쿠팡에서의 6개월 회고

남이 짠 코드를 읽는 건 재미없는 일입니다. 가끔 잘 짜인 코드를 볼 때면 기분이 좋았지만… 그런 일이 많지는 않았습니다. 잘 짠 코드라 하더라도 코드 타래를 끝도 없이 따라가며 의도를 파악하기까지의 순간은 고통 그 자체였습니다. 내가 코딩할 때나 재미를 느끼는 것입니다.

코드를 짜는 재미

남이 짠 코드를 읽는 건 재미없는 일입니다.
가끔 잘 짜인 코드를 볼 때면 기분이 좋았지만… 그런 일이 많지는 않았습니다.
잘 짠 코드라 하더라도 코드 타래를 끝도 없이 따라가며 의도를 파악하기까지의 순간은 고통 그 자체였습니다.
내가 코딩할 때나 재미를 느끼는 것입니다.

남의 코드를 많이 읽어야 실력이 빨리 향상된다고 합니다. 동의합니다.
저도 공부를 위해 가끔 오픈 소스 코드를 다운로드해서 읽어 보려 시도했지만…
번번이 포기했습니다. 너무 어렵고 재미없고 고통스러워서.
20년 동안 코딩을 했지만 실력이 이 모양인 건 남의 코드를 많이 안 읽어서 아닐까?

요즘 다시 남의 코드를 읽고 있습니다.
다 Cursor 덕분입니다.
Cursor에게 부탁하고 Accept를 누르다 보면 코드를 하나도 모른 채 프로그램이 동작하게 됩니다.
분명 내 프로젝트인데 어떤 파일에 어떤 코드들이 있는 건지 나도 모르겠어.

할 수 없이 잠시 멈추고 꾸역꾸역 코드를 읽습니다.
남이 짠 코드. 역시나 재미없고 스트레스를 받습니다.
그래도 읽어 나갈 수밖에 없습니다. 내 프로젝트니까.

이렇게라도 남의 코드를 읽으며 배울 수 있으니 좋은 거 아닐까?
그런 생각이 들면서도 이게 뭐 하는 짓인가 현타가 오는 건 어쩔 수 없습니다. 코딩을 하는 재미를 빼앗기고 있는 것 같습니다.

바둑을 두던 사람들도 이런 기분이었을까요?

https://jeho.page/essay/2024/12/23/writing-code.html

남이 짠 코드를 읽는 건 재미없는 일입니다. 가끔 잘 짜인 코드를 볼 때면 기분이 좋았지만… 그런 일이 많지는 않았습니다. 잘 짠 코드라 하더라도 코드 타래를 끝도 없이 따라가며 의도를 파악하기까지의 순간은 고통 그 자체였습니다. 내가 코딩할 때나 재미를 느끼는 것입니다. 남의 코드를 많이 읽어야 실력이 빨리 향상된다고 합니다. 동의합니다. 저도 공부를 위해 가끔 오픈 소스 코드를 다운로드해서 읽어 보려 시도했지만… 번번이 포기했습니다. 너무 어렵고 재미없고 고통스러워서. 20년 동안 코딩을 했지만 실력이 이 모양인 건 남의 코드를 많이 안 읽어서 아닐까? 요즘 다시 남의 코드를 읽고 있습니다. 다 Cursor 덕분입니다. Cursor에게 부탁하고 Accept를 누르다 보면 코드를 하나도 모른 채 프로그램이 동작하게 됩니다. 분명 내 프로젝트인데 어떤 파일에 어떤 코드들이 있는 건지 나도 모르겠어. 할 수 없이 잠시 멈추고 꾸역꾸역 코드를 읽습니다. 남이 짠 코드. 역시나 재미없고 스트레스를 받습니다. 그래도 읽어 나갈 수밖에 없습니다. 내 프로젝트니까. 이렇게라도 남의 코드를 읽으며 배울 수 있으니 좋은 거 아닐까? 그런 생각이 들면서도 이게 뭐 하는 짓인가 현타가 오는 건 어쩔 수 없습니다. 코딩을 하는 재미를 빼앗기고 있는 것 같습니다. 바둑을 두던 사람들도 이런 기분이었을까요? https://jeho.page/essay/2024/12/23/writing-code.html

K리그 프로그래머

매년 이맘때면 연락이 와요. 회사는 어떤지, 하는 일은 마음에 드는지 안부를 묻죠. 헤드헌터예요.

이직 생각이 없더라도 헤드헌터와 알고 지내는 건 제법 괜찮은 선택이에요. '정보의 비대칭성'을 해소할 수 있으니까요.

구체적으론 세 가지 좋은 점이 있었어요.

1. 채용 시장의 분위기를 파악할 수 있어요
2. 서류 전형에 대한 부담이 낮아져요
3. 연봉 계약도 혼자 하는 것보단 유리해져요

여러분이 생각하는 헤드헌터를 알고 지내면 좋은 이유는 무엇인가요? 혹시 단점도 있었나요?

매년 이맘때면 연락이 와요. 회사는 어떤지, 하는 일은 마음에 드는지 안부를 묻죠. 헤드헌터예요. 이직 생각이 없더라도 헤드헌터와 알고 지내는 건 제법 괜찮은 선택이에요. '정보의 비대칭성'을 해소할 수 있으니까요. 구체적으론 세 가지 좋은 점이 있었어요. 1. 채용 시장의 분위기를 파악할 수 있어요2. 서류 전형에 대한 부담이 낮아져요3. 연봉 계약도 혼자 하는 것보단 유리해져요 여러분이 생각하는 헤드헌터를 알고 지내면 좋은 이유는 무엇인가요? 혹시 단점도 있었나요?&nbsp;

헤드헌터와 알고 지내면 좋은 점

전 헤드헌터라는 존재를 본적이 없어요,,,,ㅎㅎ

이전 풀스택 데브코스 멘토 활동에 이어, 이번에는 웹 파트 데브코스 최종 프로젝트 멘토를 맡게 되었습니다. 이번 주에는 총 3팀의 멘토링을 진행했는데요, 각 팀은 문제 정의부터 시작해 하나의 서비스를 만들어야 했으며, 단 1개월이라는 짧은 시간 안에 MVP를 완성해야 하는 상황이었습니다.

멘토링을 진행하면서 공통적으로 드리게 된 피드백이 있었고, 그중 가장 중요하다고 생각하는 3가지를 공유해보겠습니다.

1️⃣ 너무 많은 기능을 정의하지 말고, 각 기능의 우선순위를 세워 개발하세요.

- 처음 기획을 하고 기능 정의를 하다 보면, 필요해 보이는 수많은 기능들이 떠오릅니다. 하지만 모든 기능을 개발하려다 보면 시간과 자원이 부족해질 가능성이 큽니다.
- 따라서 각 기능의 우선순위를 정하고, 가장 핵심적인 기능부터 개발해 나가길 추천드립니다. ‘MVP의 본질’에 집중하는 것이 중요합니다.

2️⃣ 기술을 위한 문제를 정의하지 말고, 문제를 해결하기 위해 기술을 선택하세요

- 최근 AI가 대세가 되면서, 사이드 프로젝트에 AI 기능을 추가하는 경우가 많아졌습니다.
- 그러나 ‘왜 AI 기능을 추가하셨나요?’, ‘AI로 어떤 문제를 해결하고 싶은가요?’ 라는 질문에 명확히 답하지 못하는 팀들을 자주 보았습니다.
- 이는 AI가 정말 필요해서가 아니라, 트렌드에 따라 억지로 끼워 맞춘 결과라고 생각합니다.
- AI를 비롯한 다양한 기술을 채택할 때, 그것이 문제를 해결하는 데 꼭 필요한 기술인지 깊이 고민해 보세요.
만약 그 필요성을 명확히 설명하지 못한다면, 과감히 해당 기술을 제외하고 문제의 본질에 집중해보기를 추천드립니다.

3️⃣ 사이드 프로젝트는 ‘완성’이 목표이며, ‘시작점’입니다.

- 개인적으로, 사이드 프로젝트는 완성을 해야만 가치가 있다고 생각합니다.
물론 프로젝트 과정에서 얻는 경험도 중요하지만, 완성하지 못하고 흐지부지 끝난 프로젝트는 결과적으로 아무것도 남지 않게 됩니다.
- 프로젝트가 흐지부지 끝났을 때가 진짜 실패라고 생각합니다.
- 완성을 목표로 명확한 계획을 세우세요.
그 이후에 추가 개발이나 기능 확장을 통해 프로젝트를 발전시킬 기회를 만들어 보세요.
시작 단계에서는 완성을 가장 중요한 목표로 삼는 것이 필요합니다

이전 풀스택 데브코스 멘토 활동에 이어, 이번에는 웹 파트 데브코스 최종 프로젝트 멘토를 맡게 되었습니다. 이번 주에는 총 3팀의 멘토링을 진행했는데요, 각 팀은 문제 정의부터 시작해 하나의 서비스를 만들어야 했으며, 단 1개월이라는 짧은 시간 안에 MVP를 완성해야 하는 상황이었습니다. 멘토링을 진행하면서 공통적으로 드리게 된 피드백이 있었고, 그중 가장 중요하다고 생각하는 3가지를 공유해보겠습니다. 1️⃣ 너무 많은 기능을 정의하지 말고, 각 기능의 우선순위를 세워 개발하세요. - 처음 기획을 하고 기능 정의를 하다 보면, 필요해 보이는 수많은 기능들이 떠오릅니다. 하지만 모든 기능을 개발하려다 보면 시간과 자원이 부족해질 가능성이 큽니다.- 따라서 각 기능의 우선순위를 정하고, 가장 핵심적인 기능부터 개발해 나가길 추천드립니다. ‘MVP의 본질’에 집중하는 것이 중요합니다. 2️⃣ 기술을 위한 문제를 정의하지 말고, 문제를 해결하기 위해 기술을 선택하세요 - 최근 AI가 대세가 되면서, 사이드 프로젝트에 AI 기능을 추가하는 경우가 많아졌습니다.- 그러나 ‘왜 AI 기능을 추가하셨나요?’, ‘AI로 어떤 문제를 해결하고 싶은가요?’ 라는 질문에 명확히 답하지 못하는 팀들을 자주 보았습니다.- 이는 AI가 정말 필요해서가 아니라, 트렌드에 따라 억지로 끼워 맞춘 결과라고 생각합니다.- AI를 비롯한 다양한 기술을 채택할 때, 그것이 문제를 해결하는 데 꼭 필요한 기술인지 깊이 고민해 보세요.만약 그 필요성을 명확히 설명하지 못한다면, 과감히 해당 기술을 제외하고 문제의 본질에 집중해보기를 추천드립니다. 3️⃣ 사이드 프로젝트는 ‘완성’이 목표이며, ‘시작점’입니다. - 개인적으로, 사이드 프로젝트는 완성을 해야만 가치가 있다고 생각합니다.물론 프로젝트 과정에서 얻는 경험도 중요하지만, 완성하지 못하고 흐지부지 끝난 프로젝트는 결과적으로 아무것도 남지 않게 됩니다.- 프로젝트가 흐지부지 끝났을 때가 진짜 실패라고 생각합니다.- 완성을 목표로 명확한 계획을 세우세요.그 이후에 추가 개발이나 기능 확장을 통해 프로젝트를 발전시킬 기회를 만들어 보세요.시작 단계에서는 완성을 가장 중요한 목표로 삼는 것이 필요합니다

프로그래머스 데브코스 멘토링을 하며 드리는 피드백 3가지

최근에 회사에서 특정 프롬프트의 성능을 올리기 위해서
프롬프트 엔지니어링과 파인튜닝을 진행해보았습니다.

프롬프트 엔지니어링을 사용해서 모든 케이스를 커버하고 있었습니다만,
조금 더 성능을 높이고 싶은 욕심이 있었기에, Llama 3.3이 새로나왔다고 하여 70B(700억파라메터)모델을 파인튜닝 해보기로 하였습니다.

7B의 경우는 로컬머신으로도 간단하게 파인튜닝이 가능했습니다만,
70B부터는 많은 문제들이 생겼습니다. 메모리가 부족하여 Cuda Out of Memory 를 수도없이 보았습니다. 70B를 파인튜닝 하기위해서는 최소 160GB의 메모리가 필요했기 때문입니다.

그리고 같은 텐서가 다른머신에 들어가서 데이터가 꼬이는 일도 발생하였습니다.
다양한 버그와 에러들을 뚫고 겨우겨우 학습을 시도하는 창이 떴습니다만....
저는 여기서 포기할 수 밖에 없었습니다.

왜냐하면 학습하는데 332시간이 걸렸기 때문입니다.
클라우드에서 A100 16대를 사용하는 환경이었는데, 332시간이면 어림잡아
비용이 천만원이 나왔습니다.

그때 확실히 깨달았습니다. AI에는 돈이 많이 필요하구나...
심지어 가장 파라메터가 많은 405B모델도 아니었습니다.
405B모델은 4비트 양자화를 해서 파인튜닝 하는데에도 H100 8대가 필요했습니다.
서빙에는 H100 4대가 필했구요. Llama를 회사에서 서비스 하기위해 운영하는것은 참으로 가성비가 나오지 않는 일이었습니다.

AI학습이 조금 더 저렴해지는 시기가 곧 오겠지만...
아직은 너무 비싸네요.

최근에 회사에서 특정 프롬프트의 성능을 올리기 위해서프롬프트 엔지니어링과 파인튜닝을 진행해보았습니다. 프롬프트 엔지니어링을 사용해서 모든 케이스를 커버하고 있었습니다만, 조금 더 성능을 높이고 싶은 욕심이 있었기에, Llama 3.3이 새로나왔다고 하여 70B(700억파라메터)모델을 파인튜닝 해보기로 하였습니다. 7B의 경우는 로컬머신으로도 간단하게 파인튜닝이 가능했습니다만, 70B부터는 많은 문제들이 생겼습니다. 메모리가 부족하여 Cuda Out of Memory 를 수도없이 보았습니다. 70B를 파인튜닝 하기위해서는 최소 160GB의 메모리가 필요했기 때문입니다. 그리고 같은 텐서가 다른머신에 들어가서 데이터가 꼬이는 일도 발생하였습니다. 다양한 버그와 에러들을 뚫고 겨우겨우 학습을 시도하는 창이 떴습니다만....저는 여기서 포기할 수 밖에 없었습니다. 왜냐하면 학습하는데 332시간이 걸렸기 때문입니다. 클라우드에서 A100 16대를 사용하는 환경이었는데, 332시간이면 어림잡아 비용이 천만원이 나왔습니다. 그때 확실히 깨달았습니다. AI에는 돈이 많이 필요하구나...심지어 가장 파라메터가 많은 405B모델도 아니었습니다. 405B모델은 4비트 양자화를 해서 파인튜닝 하는데에도 H100 8대가 필요했습니다. 서빙에는 H100 4대가 필했구요. Llama를 회사에서 서비스 하기위해 운영하는것은 참으로 가성비가 나오지 않는 일이었습니다. AI학습이 조금 더 저렴해지는 시기가 곧 오겠지만... 아직은 너무 비싸네요.

Llama 3.3 70B를 파인튜닝하다 중단한 이야기

코드에서 if는 가능성을 의미해요. if를 로직 깊이 숨기는 건 복잡성을 늘리는 일이에요.

그래서 if는 최대한 밖으로 꺼내야 해요. 초반에 가능성을 줄이면 뒤에선 코드가 단순해져요.

개인의 목표도 마찬가지예요. 가능성을 줄여야 해요.

물론 기회라는 이름의 가능성이 열리는 건 좋은 일이에요. 하지만 기회는 때론 우릴 혼란스럽게 해요.

목표를 정했다면 일정 기간 가능성을 차단하고 밀어붙이세요. 가능성에 잡아먹히지 마세요.

코드에서 if는 가능성을 의미해요. if를 로직 깊이 숨기는 건 복잡성을 늘리는 일이에요. 그래서 if는 최대한 밖으로 꺼내야 해요. 초반에 가능성을 줄이면 뒤에선 코드가 단순해져요. 개인의 목표도 마찬가지예요. 가능성을 줄여야 해요. 물론 기회라는 이름의 가능성이 열리는 건 좋은 일이에요. 하지만 기회는 때론 우릴 혼란스럽게 해요. 목표를 정했다면 일정 기간 가능성을 차단하고 밀어붙이세요. 가능성에 잡아먹히지 마세요.&nbsp;

가능성에 잡아먹히지 마세요

처음으로 주간 인기 TOP 10에서 첫번째 포스트로 선정되어 기분이 좋습니다 :)
저에게 큰 기념이 될 순간일 것 같아요.

처음으로 주간 인기 TOP 10에서 첫번째 포스트로 선정되어 기분이 좋습니다 :)저에게 큰 기념이 될 순간일 것 같아요.

커리어리 주간 인기 TOP 10

이전 멘토링 팀이
최우수 팀에 선정된 것에 이어서
이번 멘토링 팀도 좋은 결과를 얻었네요

많은 일들을 하고 있지만
다양한 인사이트와 동기부여를 얻는
보람찬 일 중 하나입니다:)

다들 수고 많으셨습니다 🙇‍♂️

이전 멘토링 팀이 최우수 팀에 선정된 것에 이어서이번 멘토링 팀도 좋은 결과를 얻었네요 많은 일들을 하고 있지만다양한 인사이트와 동기부여를 얻는보람찬 일 중 하나입니다:) 다들 수고 많으셨습니다 🙇‍♂️

"빠르게 실행하라. 지완보다 졸속이 낫다."
-손자병법-

이 구절은 준비가 완벽하지 않더라도 신속하게 일을 진행하는 것이 완벽을 기하려다 지체하는 것보다 낫다는 의미입니다

프로젝트를 진행하다 보면 항상 드는 생각들이 있습니다.

"좀 더 완벽하게 만들어야 하지 않을까?"

코로나맵을 만들 당시에 확진자 동선 기능 이외에 다른 기능을 더 추가하려 했습니다
하지만 해당 기능을 구현하기 위해서 더 많은 기간이 필요한 상황이었습니다
빠르게 출시 후에 상황을 보고 개선을 해보자 라는 생각으로 해당 기능을 뺀 채 출시를 하였고, 오히려 빠른 출시와 핵심 기능 덕분에 많은 사용자를 끌어 모을 수 있었습니다

완벽한 서비스를 만들고 싶은 마음은 당연합니다

하지만 너무 완벽함을 추구하다 보면 오히려 개발 속도가 느려지거나 출시 자체를 못하게 되는 경우를 많이 경험했습니다

핵심 기능에 집중하고 빠르게 실행하여 고객의 의견을 듣는 것이
더 성공적인 서비스를 만드는 데 도움이 될 수 있습니다

"빠르게 실행하라. 지완보다 졸속이 낫다."-손자병법- 이 구절은 준비가 완벽하지 않더라도 신속하게 일을 진행하는 것이 완벽을 기하려다 지체하는 것보다 낫다는 의미입니다 프로젝트를 진행하다 보면 항상 드는 생각들이 있습니다. "좀 더 완벽하게 만들어야 하지 않을까?" 코로나맵을 만들 당시에 확진자 동선 기능 이외에 다른 기능을 더 추가하려 했습니다하지만 해당 기능을 구현하기 위해서 더 많은 기간이 필요한 상황이었습니다빠르게 출시 후에 상황을 보고 개선을 해보자 라는 생각으로 해당 기능을 뺀 채 출시를 하였고, 오히려 빠른 출시와 핵심 기능 덕분에 많은 사용자를 끌어 모을 수 있었습니다 완벽한 서비스를 만들고 싶은 마음은 당연합니다 하지만 너무 완벽함을 추구하다 보면 오히려 개발 속도가 느려지거나 출시 자체를 못하게 되는 경우를 많이 경험했습니다 핵심 기능에 집중하고 빠르게 실행하여 고객의 의견을 듣는 것이더 성공적인 서비스를 만드는 데 도움이 될 수 있습니다

빠르게 실행하라. 지완보다 졸속이 낫다.

내 커리어 30년을 돌이켜보면 초반에 많이 했던 실수 중의 하나가 내가 있는 현재 환경에 대한 부정적인 시각을 갖고 있었던 것이었다. 좋은 점은 눈에 안 들어오고 나쁜 점만 부각되는 형태였는데 그러면서 왠지 다른 회사나 경쟁사는 우리보다 훨씬 더 완벽한 환경이란 착각을 하는 모양새였다.

큰 기대를 가지고 다른 환경에 가서 일하면서 여기는 여기대로 또 다른 문제점들이 존재한다는 것을 깨닫는데 오랜 시간이 걸리지는 않았다. 중요한 포인트는 안 좋은 점 하나에 꽂혀 버리는 것이 아니라 균형 잡힌 시각을 갖는 것이다.

 1. 긍정적인 부분의 합이 부정적인 부분의 합보다 크다면 괜찮은 환경이다. 여기서 합을 할 때 중요한 포인트는 가중치를 분명하게 주어야 한다는 점이다. 사람이 좋은 곳인지 특히 내 상사가 좋은 사람인지 여부에는 높은 가중치를 주어야 한다. 회사의 비전과 미션이 내 개인적인 관심사와 일치하는지도 중요한 포인트다.
 2. 다른 환경은 완벽할 것이라는 기대는 충족될 수 없는 기대다. 다른 환경으로 이동할 때 기대 수준 관리를 할 필요가 있다. 기대가 크면 실망도 크다.

완벽한 환경은 존재하지 않지만, 균형 잡힌 시각을 바탕으로 긍정적인 부분의 합이 부정적인 부분의 합보다 큰지를 바라봄으로써 계속 있는 것이 맞는지 아니면 다른 환경을 찾아가는 것이 맞는지 결정할 수 있었다. 그리고 어디에 있건 언젠가는 떠나겠지만 현재에 최선을 다하는 모습을 보이는 것은 중요하다. 이게 평판에 영향을 끼치며 좋은 평판 없이 커리어 후반기 이직은 쉽지 않다.

내 커리어 30년을 돌이켜보면 초반에 많이 했던 실수 중의 하나가 내가 있는 현재 환경에 대한 부정적인 시각을 갖고 있었던 것이었다. 좋은 점은 눈에 안 들어오고 나쁜 점만 부각되는 형태였는데 그러면서 왠지 다른 회사나 경쟁사는 우리보다 훨씬 더 완벽한 환경이란 착각을 하는 모양새였다. 큰 기대를 가지고 다른 환경에 가서 일하면서 여기는 여기대로 또 다른 문제점들이 존재한다는 것을 깨닫는데 오랜 시간이 걸리지는 않았다. 중요한 포인트는 안 좋은 점 하나에 꽂혀 버리는 것이 아니라 균형 잡힌 시각을 갖는 것이다. <ol ><li>긍정적인 부분의 합이 부정적인 부분의 합보다 크다면 괜찮은 환경이다. 여기서 합을 할 때 중요한 포인트는 가중치를 분명하게 주어야 한다는 점이다. 사람이 좋은 곳인지 특히 내 상사가 좋은 사람인지 여부에는 높은 가중치를 주어야 한다. 회사의 비전과 미션이 내 개인적인 관심사와 일치하는지도 중요한 포인트다.</li><li>다른 환경은 완벽할 것이라는 기대는 충족될 수 없는 기대다. 다른 환경으로 이동할 때 기대 수준 관리를 할 필요가 있다. 기대가 크면 실망도 크다.</li></ol> 완벽한 환경은 존재하지 않지만, 균형 잡힌 시각을 바탕으로 긍정적인 부분의 합이 부정적인 부분의 합보다 큰지를 바라봄으로써 계속 있는 것이 맞는지 아니면 다른 환경을 찾아가는 것이 맞는지 결정할 수 있었다. 그리고 어디에 있건 언젠가는 떠나겠지만 현재에 최선을 다하는 모습을 보이는 것은 중요하다. 이게 평판에 영향을 끼치며 좋은 평판 없이 커리어 후반기 이직은 쉽지 않다.

모든 일에는 명암이 있다

업무능력만 있으면 됩니다 무슨 결혼상대 구하는 것도 아니고 직원이 일만 잘 하면 되지 무슨 평판 따지고 그렇게 평판 따지고 비전 따지고 할거면 평생 그 회사에 몸 담지 이직은 또 왜 합니까 실제로는 신입개발자 취업 기회도 안 주면서 전혀 현실과 동떨어진 알맹이 없는 허황된 말로만 들리네요

한 유튜버의 면접자가 실제로 썼던 코드라네요ㅋㅋ 창의성으로 통과시켜주고 싶었으나 hiring committee에서 탈락시켰다고...
😵‍💫😵‍💫

한 유튜버의 면접자가 실제로 썼던 코드라네요ㅋㅋ 창의성으로 통과시켜주고 싶었으나 hiring committee에서 탈락시켰다고...😵‍💫😵‍💫

Sleep Sort를 아세요??

저는 멘토링을 할 때 개발뿐만 아니라 문제 정의부터 시작해 기획, 커뮤니케이션, 팀 문화, PPT, 발표 등 사이드 프로젝트를 만드는데 도움을 줄 수 있는 전과정에 관한 피드백을 드립니다.

특히, 개발자분들만 모여 있는 경우 발표와 관련된 부분을 굉장히 어려워하는 것을 많이 봤습니다.
발표 자료 구성, 전달력 있는 말하기 방법, 톤, 말할 때의 습관 등 다양한 부분에 피드백을 드리는 것이 중요하다고 생각합니다.

오늘은 사이드 프로젝트 발표에서 PPT를 어떻게 구성하는지에 대한 피드백을 공유해보겠습니다.
기초적인 내용이 많지만, 실제로 도움을 드렸던 부분을 중심으로 정리해봤습니다.

---
1. 발표는 설득이 목적입니다

- 여러분은 프로젝트의 기능과 목적 등 모든 것을 이미 알고 있지만, 발표를 듣는 분들은 대부분 처음 프로젝트를 접하는 분들입니다.

- 따라서 발표 자료는 매우 친절하게 구성하고, 설득을 목적으로 만들어야 합니다.

- "왜 이 서비스를 만들었지?" "왜 해당 기능을 넣었을까?"와 같은 질문에 충분히 답할 수 있도록 자료를 준비하세요.

- 문제 정의 - 기획 소개 - 기능 소개 - 시연 - 마무리로 이어지는 흐름을 방해받지 않도록 구성하세요.

---
2. '3의 법칙'

- 문제 정의, 특징, 기능 등을 소개할 때 숫자 3을 기억하세요.

- 정보를 제시하거나 설득의 근거를 제시할 때 3개로 구성하면 효과적입니다.

- 1~2개의 경우 부족하다는 느낌을 주고, 4개 이상은 복잡하다는 인상을 줄 수 있습니다.

- 기획 및 컨설팅 업계에서는 숫자 3을 적음의 끝이자 많음의 시작이라고 표현합니다. (출처 - 시선의 발견)

- PPT에서도 숫자 3을 적절히 활용하세요.

---
3. 너무 많은 텍스트를 자료에 넣지 마세요

- 발표 자료는 발표자를 돕는 도구입니다.

- 발표 중 청중의 시선은 발표 자료가 아니라 발표자에게 머물러야 합니다.

- 하지만 PPT를 만드는 입장에서는 최대한 많은 정보를 담고 싶어 하죠.

- 이로 인해 가독성이 떨어지고, 청중이 장문의 텍스트를 읽느라 시선이 분산될 수 있습니다.

- PPT에는 중요하고 수치적인 텍스트만 간결하게 정리하고, 부연 설명은 발표자가 직접 하는 것이 좋습니다.

---
4. 최종 시연은 영상으로 진행하세요

- 시연 방법은 크게 두 가지가 있습니다.
1. 직접 웹이나 앱을 띄워놓고 시연하는 방법
2. 미리 녹화한 영상을 PPT에 삽입해 진행하는 방법

- 저는 필수가 아닌 이상 두 번째 방법을 추천합니다.

- 라이브 시연은 생생함과 어필력을 제공하지만, 시간 조절이 어렵고 실수의 가능성이 있으며, 발표 흐름이 끊길 수 있는 단점이 있습니다.

- 미리 녹화한 영상은 시간 활용이 정확하고 편집이 가능해 청중이 이해하기 쉽습니다.

- 때문에 가능하면 녹화된 시연 영상을 활용하시기를 권장합니다.

저는 멘토링을 할 때 개발뿐만 아니라 문제 정의부터 시작해 기획, 커뮤니케이션, 팀 문화, PPT, 발표 등 사이드 프로젝트를 만드는데 도움을 줄 수 있는 전과정에 관한 피드백을 드립니다. 특히, 개발자분들만 모여 있는 경우 발표와 관련된 부분을 굉장히 어려워하는 것을 많이 봤습니다.발표 자료 구성, 전달력 있는 말하기 방법, 톤, 말할 때의 습관 등 다양한 부분에 피드백을 드리는 것이 중요하다고 생각합니다. 오늘은 사이드 프로젝트 발표에서 PPT를 어떻게 구성하는지에 대한 피드백을 공유해보겠습니다.기초적인 내용이 많지만, 실제로 도움을 드렸던 부분을 중심으로 정리해봤습니다. ---1. 발표는 설득이 목적입니다 - 여러분은 프로젝트의 기능과 목적 등 모든 것을 이미 알고 있지만, 발표를 듣는 분들은 대부분 처음 프로젝트를 접하는 분들입니다. - 따라서 발표 자료는 매우 친절하게 구성하고, 설득을 목적으로 만들어야 합니다. - "왜 이 서비스를 만들었지?" "왜 해당 기능을 넣었을까?"와 같은 질문에 충분히 답할 수 있도록 자료를 준비하세요. - 문제 정의 - 기획 소개 - 기능 소개 - 시연 - 마무리로 이어지는 흐름을 방해받지 않도록 구성하세요. ---2. '3의 법칙' - 문제 정의, 특징, 기능 등을 소개할 때 숫자 3을 기억하세요. - 정보를 제시하거나 설득의 근거를 제시할 때 3개로 구성하면 효과적입니다. - 1~2개의 경우 부족하다는 느낌을 주고, 4개 이상은 복잡하다는 인상을 줄 수 있습니다. - 기획 및 컨설팅 업계에서는 숫자 3을 적음의 끝이자 많음의 시작이라고 표현합니다. (출처 - 시선의 발견) - PPT에서도 숫자 3을 적절히 활용하세요. ---3. 너무 많은 텍스트를 자료에 넣지 마세요 - 발표 자료는 발표자를 돕는 도구입니다. - 발표 중 청중의 시선은 발표 자료가 아니라 발표자에게 머물러야 합니다. - 하지만 PPT를 만드는 입장에서는 최대한 많은 정보를 담고 싶어 하죠. - 이로 인해 가독성이 떨어지고, 청중이 장문의 텍스트를 읽느라 시선이 분산될 수 있습니다. - PPT에는 중요하고 수치적인 텍스트만 간결하게 정리하고, 부연 설명은 발표자가 직접 하는 것이 좋습니다. ---4. 최종 시연은 영상으로 진행하세요 - 시연 방법은 크게 두 가지가 있습니다.1. 직접 웹이나 앱을 띄워놓고 시연하는 방법2. 미리 녹화한 영상을 PPT에 삽입해 진행하는 방법 - 저는 필수가 아닌 이상 두 번째 방법을 추천합니다. - 라이브 시연은 생생함과 어필력을 제공하지만, 시간 조절이 어렵고 실수의 가능성이 있으며, 발표 흐름이 끊길 수 있는 단점이 있습니다. - 미리 녹화한 영상은 시간 활용이 정확하고 편집이 가능해 청중이 이해하기 쉽습니다. - 때문에 가능하면 녹화된 시연 영상을 활용하시기를 권장합니다.

사이드 프로젝트 발표 피드백

YouTube에서 마음에 드는 동영상과 음악을 감상하고, 직접 만든 콘텐츠를 업로드하여 친구, 가족뿐 아니라 전 세계 사람들과 콘텐츠를 공유할 수 있습니다.

 - YouTube

최근 프론트엔드 개발에서 API 모킹의 중요성이 점점 커지고 있습니다. 서버 개발이 완료되지 않은 상태에서도 Mock 데이터를 이용해 프론트엔드 개발을 진행하고, 독립적인 테스트를 수행할 수 있기 때문인데요. 이와 관련하여, 개인적으로 우아한형제들이 개발한 MSG(Mock Service GUI)관련 소프트웨어를 관심있게 지켜보고 있습니다.

MSG(Mock Service GUI)란?
MSG는 기존의 모킹 방식처럼 코드를 수정하는 번거로움 없이, 브라우저에 표시되는 UI를 통해 모킹 데이터를 제어할 수 있는 도구입니다. MSW(Mock Service Worker)를 기반으로 개발되었으며, 브라우저 확장 프로그램이 아닌 프로젝트에 디펜던시로 설치해 사용합니다.

MSG의 주요 기능
 * UI 기반 제어: API 모킹 데이터를 코딩하지 않고 UI에서 직접 선택 및 수정할 수 있습니다. 이를 통해 API 응답 데이터를 실시간으로 변경하며 화면 전환 결과를 바로 확인할 수 있습니다.
 * 로컬스토리지 활용: 각자의 브라우저 로컬스토리지에 개인 맞춤형 API 모킹 설정을 저장하고 관리할 수 있습니다. 팀원 간 설정 충돌을 방지하며 작업 효율성을 높입니다.
 * 프로젝트 통합성: MSG는 API 모킹 데이터를 프로젝트 내 여러 API와 쉽게 매핑할 수 있어, 신규 프로젝트 셋업 시에도 빠르고 효과적으로 활용할 수 있습니다.
MSG의 활용 사례
 * 우아한형제들은 MSG를 주문, 결제, 회원 도메인 프로젝트에 적용했으며, 특히 배민클럽 구독 서비스 프로젝트에서는 초기 셋업부터 MSG를 적극적으로 활용해 다량의 모킹 데이터를 효율적으로 관리했습니다.
 * 최신 버전인 MSG 2.0은 기능이 더욱 강화되어, 팀 내 다양한 프로젝트에서 사용 사례가 점차 확대되고 있다고 합니다.

현재 MSG는 오픈소스 전환을 목표로 개발되고 있습니다. 만약 공개된다면, QA, 기획자, 개발자 모두가 실시간으로 데이터를 확인하고 테스트하면서 더욱 원활하고 신속한 협업이 가능해질 것으로 보입니다. 오픈소스로 공개된다면 안쓸 이유가 없어보이고 여러 부서와 팀에 긍정적인 변화를 가져올 것으로 보이는만큼 빨리 공개되었으면 좋겠네요 :)

https://www.youtube.com/watch?v=dDAfG4fe4do
https://techblog.woowahan.com/20154/

최근 프론트엔드 개발에서 API 모킹의 중요성이 점점 커지고 있습니다. 서버 개발이 완료되지 않은 상태에서도 Mock 데이터를 이용해 프론트엔드 개발을 진행하고, 독립적인 테스트를 수행할 수 있기 때문인데요. 이와 관련하여, 개인적으로 우아한형제들이 개발한 MSG(Mock Service GUI)관련 소프트웨어를 관심있게 지켜보고 있습니다. MSG(Mock Service GUI)란?MSG는 기존의 모킹 방식처럼 코드를 수정하는 번거로움 없이, 브라우저에 표시되는 UI를 통해 모킹 데이터를 제어할 수 있는 도구입니다. MSW(Mock Service Worker)를 기반으로 개발되었으며, 브라우저 확장 프로그램이 아닌 프로젝트에 디펜던시로 설치해 사용합니다. MSG의 주요 기능<ul ><li>UI 기반 제어: API 모킹 데이터를 코딩하지 않고 UI에서 직접 선택 및 수정할 수 있습니다. 이를 통해 API 응답 데이터를 실시간으로 변경하며 화면 전환 결과를 바로 확인할 수 있습니다.</li><li>로컬스토리지 활용: 각자의 브라우저 로컬스토리지에 개인 맞춤형 API 모킹 설정을 저장하고 관리할 수 있습니다. 팀원 간 설정 충돌을 방지하며 작업 효율성을 높입니다.</li><li>프로젝트 통합성: MSG는 API 모킹 데이터를 프로젝트 내 여러 API와 쉽게 매핑할 수 있어, 신규 프로젝트 셋업 시에도 빠르고 효과적으로 활용할 수 있습니다.</li></ul>MSG의 활용 사례<ul ><li>우아한형제들은 MSG를 주문, 결제, 회원 도메인 프로젝트에 적용했으며, 특히 배민클럽 구독 서비스 프로젝트에서는 초기 셋업부터 MSG를 적극적으로 활용해 다량의 모킹 데이터를 효율적으로 관리했습니다.</li><li>최신 버전인 MSG 2.0은 기능이 더욱 강화되어, 팀 내 다양한 프로젝트에서 사용 사례가 점차 확대되고 있다고 합니다.</li></ul> 현재 MSG는 오픈소스 전환을 목표로 개발되고 있습니다. 만약 공개된다면, QA, 기획자, 개발자 모두가 실시간으로 데이터를 확인하고 테스트하면서 더욱 원활하고 신속한 협업이 가능해질 것으로 보입니다. 오픈소스로 공개된다면 안쓸 이유가 없어보이고 여러 부서와 팀에 긍정적인 변화를 가져올 것으로 보이는만큼 빨리 공개되었으면 좋겠네요 :) https://www.youtube.com/watch?v=dDAfG4fe4dohttps://techblog.woowahan.com/20154/

www.youtube.com

API 모킹 환경의 진화, MSG(Mock Service GUI)

2024 was insane, and many things happened around AI and software development in general. I believe...

25 top open-source tools for building web apps you can't afford to miss in 2025🎉 🚀

여기 2024년에 가능성을 보여주었고, 2025년에 더욱 빛날 것으로 보이는 25개의 오픈소스 웹앱개발도구를 소개합니다. 보다 상세한 사용법과 내용은 원문을 참고해주시기 바랍니다~^^

1. AI 및 LLM 도구
 * Composio
   * https://composio.dev/
   * AI 에이전트 통합 플랫폼
   * 250개 이상의 애플리케이션을 지원하며, GitHub, Jira, Salesforce, Gmail 등 다수의 SaaS 앱 연결 지원
 * Vercel AI SDK
   * https://sdk.vercel.ai/
   * TypeScript로 AI 웹 앱 빌드
   * React, Next.js, Vue, SvelteKit 등을 지원하며, 반복적인 설정을 단순화하고 대화형 UI 기반 구축
 * LangGraph JS
   * https://www.langchain.com/langgraph
   * 그래프 기반 에이전트 워크플로우 구축
   * 상태 머신 개념을 사용하여 복잡한 AI 워크플로우를 그래프 방식으로 쉽게 구축
 * CopilotKit
   * https://www.copilotkit.ai/
   * 웹 앱에 AI 코파일럿 추가, GitHub Copilot과 같은 기능을 앱에 쉽게 추가
 * LanceDB
   * https://lancedb.com/
   * AI 앱을 위한 고성능 벡터 데이터베이스
   * 벡터 임베딩을 효율적으로 저장하고 쿼리할 수 있는 SQLite와 유사한 빠른 데이터베이스

2. 프레임워크 및 빌드 도구
 * Encore
   * https://encore.dev/
   * 자동화된 인프라가 포함된 백엔드 프레임워크
   * 클라우드 서비스를 단순화하여 일관된 API와 DevOps 자동화 제공
 * HTMX
   * https://htmx.org/
   * JavaScript 없이 동적 웹 앱 개발
   * HTML만으로도 모던한 웹 앱을 구축
 * Val Town
   * https://www.val.town/
   * 서버리스 JavaScript 실행 플랫폼
   * GitHub Gist와 서버리스 함수의 결합처럼 작동하며 JavaScript 코드 공유와 실행 방식 혁신
 * Deno 2
   * https://deno.com/
   * TypeScript 지원을 내장한 안전한 런타임
   * Node.js의 창시자인 Ryan Dahl의 새로운 프로젝트로, 현대적인 기능과 내장된 보안 제공
 * Turborepo
   * https://turbo.build/
   * 고성능 JS 모노레포 빌드 시스템
   * 지능형 캐싱과 병렬 실행을 통해 모노레포 관리의 빌드 시간 단축

3. 실시간 및 이벤트 기반 시스템
 * Socket.io
   * https://socket.io/
   * 웹 앱용 양방향 실시간 통신 라이브러리
   * 실시간 기능을 추가할 때 복잡한 통신 문제를 손쉽게 처리
 * Feather.js
   * https://feathersjs.com/
   * 실시간 API 프레임워크
   * REST API와 실시간 업데이트를 모두 지원하는 프레임워크
 * Deepstream.io
   * https://deepstream.io/
   * 확장 가능한 실시간 데이터 동기화 엔진
   * 협업 편집기나 멀티플레이어 게임 구축에 적합
 * Serverless Framework
   * https://www.serverless.com/
   * 클라우드 애그노스틱 서버리스 앱 개발
   * AWS, Azure, Google Cloud 등 다양한 클라우드 환경에서 서버리스 애플리케이션을 배포
 * RabbitMQ
   * https://www.rabbitmq.com/
   * 분산 시스템을 위한 강력한 메시지 브로커
   * 신뢰할 수 있는 메시지 전달을 지원하며 Node.js 애플리케이션에 필수

4. 개발자 경험 및 테스트 도구
 * Vitest
   * https://vitest.dev/
   * Vite 통합 차세대 테스트 프레임워크
   * 빠른 속도로 테스트를 실행하며, 개발 서버의 성능을 테스트 환경에서도 제공
 * Playwright
   * https://playwright.dev/
   * AI 기반 E2E 테스트 생성 도구
   * 믿을 수 있는 QA 엔지니어처럼 작동하며, 앱을 클릭하면 테스트 코드 자동 생성
 * Prettier
   * https://prettier.io/
   * 코드 포맷터
   * 세미콜론이나 줄바꿈과 같은 논쟁을 끝내주는 일관된 코드 포맷터
 * Jest
   * https://jestjs.io/
   * 스냅샷 지원을 갖춘 JavaScript 테스트 프레임워크
   * 단위 테스트부터 스냅샷까지 모두 지원하는 만능 도구
 * Puppeteer
   * https://pptr.dev/
   * 모던 웹 테스트를 위한 헤드리스 Chrome 자동화
   * 크롬 자동화, 웹 스크래핑, PDF 생성 등 다양한 작업 수행

5. 디자인 컴포넌트 및 UI
 * Shadcn-UI
   * https://ui.shadcn.com/
   * 복사-붙여넣기 구현을 지원하는 접근성 컴포넌트 라이브러리
   * 스타일링 제한 없이 컴포넌트를 완전 제어할 수 있는 접근 방식 제공
 * Radix Themes
   * https://www.radix-ui.com/themes/docs/components/theme
   * Radix Primitives를 위한 프로덕션 준비 테마 시스템
   * Radix Primitives의 장점을 테마 시스템에 통합하여 쉽게 활용
 * Daisy UI
   * https://daisyui.com/
   * Tailwind 기반 컴포넌트 라이브러리
   * Tailwind의 클래스를 간소화하여 코드가 더 깔끔하게 유지
 * Vanilla Extract
   * https://vanilla-extract.style/
   * 실행 시간 없는 타입이 적용된 CSS-in-JS 솔루션
   * TypeScript의 강력함과 실행 시간 없이 순수 CSS 제공
 * Ark UI
   * https://ark-ui.com/
   * 프레임워크에 구애받지 않는 헤드리스 UI 컴포넌트
   * React, Vue, Solid에서 일관된 컴포넌트 제공

 * 원문: https://dev.to/composiodev/25-top-open-source-tools-for-building-web-apps-you-cant-afford-to-miss-in-2025-5005

여기 2024년에 가능성을 보여주었고, 2025년에 더욱 빛날 것으로 보이는 25개의 오픈소스 웹앱개발도구를 소개합니다. 보다 상세한 사용법과 내용은 원문을 참고해주시기 바랍니다~^^ 1. AI 및 LLM 도구<ul ><li>Composio<ul ><li>https://composio.dev/</li><li>AI 에이전트 통합 플랫폼</li><li>250개 이상의 애플리케이션을 지원하며, GitHub, Jira, Salesforce, Gmail 등 다수의 SaaS 앱 연결 지원</li></ul></li><li>Vercel AI SDK<ul ><li>https://sdk.vercel.ai/</li><li>TypeScript로 AI 웹 앱 빌드</li><li>React, Next.js, Vue, SvelteKit 등을 지원하며, 반복적인 설정을 단순화하고 대화형 UI 기반 구축 </li></ul></li><li>LangGraph JS<ul ><li>https://www.langchain.com/langgraph</li><li>그래프 기반 에이전트 워크플로우 구축</li><li>상태 머신 개념을 사용하여 복잡한 AI 워크플로우를 그래프 방식으로 쉽게 구축</li></ul></li><li>CopilotKit<ul ><li>https://www.copilotkit.ai/</li><li>웹 앱에 AI 코파일럿 추가, GitHub Copilot과 같은 기능을 앱에 쉽게 추가</li></ul></li><li>LanceDB<ul ><li>https://lancedb.com/</li><li>AI 앱을 위한 고성능 벡터 데이터베이스</li><li>벡터 임베딩을 효율적으로 저장하고 쿼리할 수 있는 SQLite와 유사한 빠른 데이터베이스</li></ul></li></ul> 2. 프레임워크 및 빌드 도구<ul ><li>Encore<ul ><li>https://encore.dev/</li><li>자동화된 인프라가 포함된 백엔드 프레임워크</li><li>클라우드 서비스를 단순화하여 일관된 API와 DevOps 자동화 제공</li></ul></li><li>HTMX<ul ><li>https://htmx.org/</li><li>JavaScript 없이 동적 웹 앱 개발</li><li>HTML만으로도 모던한 웹 앱을 구축</li></ul></li><li>Val Town<ul ><li>https://www.val.town/</li><li>서버리스 JavaScript 실행 플랫폼</li><li>GitHub Gist와 서버리스 함수의 결합처럼 작동하며 JavaScript 코드 공유와 실행 방식 혁신</li></ul></li><li>Deno 2<ul ><li>https://deno.com/</li><li>TypeScript 지원을 내장한 안전한 런타임</li><li>Node.js의 창시자인 Ryan Dahl의 새로운 프로젝트로, 현대적인 기능과 내장된 보안 제공</li></ul></li><li>Turborepo<ul ><li>https://turbo.build/</li><li>고성능 JS 모노레포 빌드 시스템</li><li>지능형 캐싱과 병렬 실행을 통해 모노레포 관리의 빌드 시간 단축</li></ul></li></ul> 3. 실시간 및 이벤트 기반 시스템<ul ><li>Socket.io<ul ><li>https://socket.io/</li><li>웹 앱용 양방향 실시간 통신 라이브러리</li><li>실시간 기능을 추가할 때 복잡한 통신 문제를 손쉽게 처리</li></ul></li><li>Feather.js<ul ><li>https://feathersjs.com/</li><li>실시간 API 프레임워크</li><li>REST API와 실시간 업데이트를 모두 지원하는 프레임워크</li></ul></li><li>Deepstream.io<ul ><li>https://deepstream.io/</li><li>확장 가능한 실시간 데이터 동기화 엔진</li><li>협업 편집기나 멀티플레이어 게임 구축에 적합</li></ul></li><li>Serverless Framework<ul ><li>https://www.serverless.com/</li><li>클라우드 애그노스틱 서버리스 앱 개발</li><li>AWS, Azure, Google Cloud 등 다양한 클라우드 환경에서 서버리스 애플리케이션을 배포</li></ul></li><li>RabbitMQ<ul ><li>https://www.rabbitmq.com/</li><li>분산 시스템을 위한 강력한 메시지 브로커</li><li>신뢰할 수 있는 메시지 전달을 지원하며 Node.js 애플리케이션에 필수</li></ul></li></ul> 4. 개발자 경험 및 테스트 도구<ul ><li>Vitest<ul ><li>https://vitest.dev/</li><li>Vite 통합 차세대 테스트 프레임워크</li><li>빠른 속도로 테스트를 실행하며, 개발 서버의 성능을 테스트 환경에서도 제공</li></ul></li><li>Playwright<ul ><li>https://playwright.dev/</li><li>AI 기반 E2E 테스트 생성 도구</li><li>믿을 수 있는 QA 엔지니어처럼 작동하며, 앱을 클릭하면 테스트 코드 자동 생성</li></ul></li><li>Prettier<ul ><li>https://prettier.io/</li><li>코드 포맷터</li><li>세미콜론이나 줄바꿈과 같은 논쟁을 끝내주는 일관된 코드 포맷터</li></ul></li><li>Jest<ul ><li>https://jestjs.io/</li><li>스냅샷 지원을 갖춘 JavaScript 테스트 프레임워크</li><li>단위 테스트부터 스냅샷까지 모두 지원하는 만능 도구</li></ul></li><li>Puppeteer<ul ><li>https://pptr.dev/</li><li>모던 웹 테스트를 위한 헤드리스 Chrome 자동화</li><li>크롬 자동화, 웹 스크래핑, PDF 생성 등 다양한 작업 수행</li></ul></li></ul> 5. 디자인 컴포넌트 및 UI<ul ><li>Shadcn-UI<ul ><li>https://ui.shadcn.com/</li><li>복사-붙여넣기 구현을 지원하는 접근성 컴포넌트 라이브러리</li><li>스타일링 제한 없이 컴포넌트를 완전 제어할 수 있는 접근 방식 제공</li></ul></li><li>Radix Themes<ul ><li>https://www.radix-ui.com/themes/docs/components/theme</li><li>Radix Primitives를 위한 프로덕션 준비 테마 시스템</li><li>Radix Primitives의 장점을 테마 시스템에 통합하여 쉽게 활용</li></ul></li><li>Daisy UI<ul ><li>https://daisyui.com/</li><li>Tailwind 기반 컴포넌트 라이브러리</li><li>Tailwind의 클래스를 간소화하여 코드가 더 깔끔하게 유지</li></ul></li><li>Vanilla Extract<ul ><li>https://vanilla-extract.style/</li><li>실행 시간 없는 타입이 적용된 CSS-in-JS 솔루션</li><li>TypeScript의 강력함과 실행 시간 없이 순수 CSS 제공</li></ul></li><li>Ark UI<ul ><li>https://ark-ui.com/</li><li>프레임워크에 구애받지 않는 헤드리스 UI 컴포넌트</li><li>React, Vue, Solid에서 일관된 컴포넌트 제공</li></ul></li></ul> <ul ><li>원문: https://dev.to/composiodev/25-top-open-source-tools-for-building-web-apps-you-cant-afford-to-miss-in-2025-5005</li></ul>

DEV Community

[Dev] 2025년에 놓쳐선 안 될 25가지 오픈소스 웹 앱 개

우아콘에 나온 데이터분석 챗봇 '물어보새!'
이거 보고 저도 만들고 있어요!
(재밌는데 AI 엔지니어로 전향을...)

연휴에 널널한데 재밌게 좋네요 :) 다들 업무에 적용해보세요!

https://youtu.be/_QPhoKItI2k?si=X7-bDz4IGqJx0NDc

우아콘에 나온 데이터분석 챗봇 '물어보새!'이거 보고 저도 만들고 있어요!(재밌는데 AI 엔지니어로 전향을...) 연휴에 널널한데 재밌게 좋네요 :) 다들 업무에 적용해보세요! https://youtu.be/_QPhoKItI2k?si=X7-bDz4IGqJx0NDc

youtu.be

랭체인+RAG으로 text to SQL 만들기

React 19가 얼마 전 정식 버전으로 출시되었는데요, 혹시 React 19 업그레이드를 고려하고 계신가요? 공식 문서의 업그레이드 가이드를 한글로 번역해두었으니 참고하시면 도움이 될 것 같습니다 😊

[번역] 리액트 19 업그레이드 가이드

오늘은 라인플러스의 김은빈님이 번역해주신 글입니다.

리액트 19가 정식 버전으로 출시되면서 많은 변화와 개선사항들이 있었습니다. 특히 메이저 업데이트인 만큼 호환성이 깨지는 변경사항들이 있어 업그레이드 시 주의가 필요한데요.

이 가이드에서는 설치부터 시작해 코드 자동 변환(Codemods), 호환성 이슈, 지원 중단되는 기능들까지 상세히 다루고 있습니다. 특히 실제 마이그레이션 과정에서 발생할 수 있는 이슈들과 해결 방법에 대해 자세히 설명하고 있으니, 리액트 19 업그레이드를 계획하고 계신 분들에게 꼭 필요한 내용이 될 것 같습니다.

업그레이드 과정에서 어려움을 겪지 않도록, 목차에 있는 내용들을 차근차근 살펴보시는 것을 추천드립니다! 😊

글 링크: https://velog.io/@eunbinn/react-19-upgrade-guide

오늘은 라인플러스의 김은빈님이 번역해주신 글입니다. 리액트 19가 정식 버전으로 출시되면서 많은 변화와 개선사항들이 있었습니다. 특히 메이저 업데이트인 만큼 호환성이 깨지는 변경사항들이 있어 업그레이드 시 주의가 필요한데요. 이 가이드에서는 설치부터 시작해 코드 자동 변환(Codemods), 호환성 이슈, 지원 중단되는 기능들까지 상세히 다루고 있습니다. 특히 실제 마이그레이션 과정에서 발생할 수 있는 이슈들과 해결 방법에 대해 자세히 설명하고 있으니, 리액트 19 업그레이드를 계획하고 계신 분들에게 꼭 필요한 내용이 될 것 같습니다. 업그레이드 과정에서 어려움을 겪지 않도록, 목차에 있는 내용들을 차근차근 살펴보시는 것을 추천드립니다! 😊 글 링크: https://velog.io/@eunbinn/react-19-upgrade-guide

velog.io

리액트 19 업그레이드 가이드

스토리북 활용법 A to Z. 스토리북의 모든것을 보여드립니다, 스토리북, 들어는 봤는데 어떻게 사용할 수 있을까요? 🤔유저 스토리를 기반으로한 기획이 주목을 받기 시작하면서, 화면에 그려지는 UI 컴포넌트의 다양한 스토리도 점점 중요해지고 있습니다. 스토리북이 무엇인지...

실무에 바로 적용하는 스토리북과 UI 테스트 강의 - 인프런

작년 말에 인프런에 테스트코드 강의를 출시했는데요, 수강평을 확인하니 스토리북에 관심을 갖고 테스트코드 강의를 신청해주신 분들이 많다는 것을 확인했습니다. 작년에 출시한 강의에서 스토리북 관련 내용은 많지 않았는데도 관심을 가져주신 것을 보고 스토리북 강의에 대한 니즈가 있다고 판단해서, 스토리북 강의를 출시했습니다!

처음 접하시는 분들도 쉽게 이해하실 수 있게 처음 설정부터 활용, 응용법들을 모두 담아내려고 노력했습니다. 도입을 검토하시는 개발팀도 참고하시면 좋을 것 같아요!

얼리버드 할인중이니 관심있는 분들은 확인하고 신청해주세요! 강의를 들으시다가 궁금하신점은 질문으로 올려주시면 최대한 빠르게 답변 드리겠습니다

https://inf.run/aUTBA

작년 말에 인프런에 테스트코드 강의를 출시했는데요, 수강평을 확인하니 스토리북에 관심을 갖고 테스트코드 강의를 신청해주신 분들이 많다는 것을 확인했습니다. 작년에 출시한 강의에서 스토리북 관련 내용은 많지 않았는데도 관심을 가져주신 것을 보고 스토리북 강의에 대한 니즈가 있다고 판단해서, 스토리북 강의를 출시했습니다! 처음 접하시는 분들도 쉽게 이해하실 수 있게 처음 설정부터 활용, 응용법들을 모두 담아내려고 노력했습니다. 도입을 검토하시는 개발팀도 참고하시면 좋을 것 같아요! 얼리버드 할인중이니 관심있는 분들은 확인하고 신청해주세요! 강의를 들으시다가 궁금하신점은 질문으로 올려주시면 최대한 빠르게 답변 드리겠습니다 https://inf.run/aUTBA

인프런

당근 모임 Product Engineer

하조은

• 개발자의 성장을 위한 컨텐츠를 만들어요
• 인프런 '손에 익는 Next.js' 강의 지식공유자
• 유튜브 '하조은조하' 운영자

프론트엔드 개발자

문지웅

샤플앤컴퍼니 매니저

송누리

스토리북을 활용한 UI 테스트와 디자인시스템 강의

MySQL

python

javascript

Docker

typescript

- Large Language Model을 활용하여 한국의 산업안전보건법 준수를 보장하는 Multi AI Agent 서비스 개발
- 석유화학 시장의 동향과 데이터를 분석하여 시장 통찰력과 의사 결정 과정을 향상시키는 Large Language Model 서비스 설계 및 구현
- Large Language Model의 품질 및 성능을 평가하는 평가 프로세스 수립

소프트웨어 엔지니어

- Lazh Loading 활용으로 웹 성능 최적화 및 Largest Contentful Paint(LCP)를 20% 감소(2.7초 -> 2.1초)
- Code Splitting 및 불필요한 패키지 의존성 감소를 통해 Web Vitals 개선
- 대규모 React.js 프로젝트를 JavaScript에서 TypeScript로 전환하여 코드 유지 보수성 향상 및 정적 타이핑의 이점을 활용하여 버그 개선
- AWS Amplify를 채택하여 CI/CD 를 통한 개발 프로세스 간소화 및 배포 효율성 향상
- Flutter 기반의 모바일 클라이언트를 위한 스캐폴딩 수립하 및 Model-View-ViewModel(MVVM) 디자인 패턴 구현으로 애플리케이션의 유지 보수성과 확장성 보장







생산기술 엔지니어

WebRTC client 및 signaling server 담당

프런트엔드 엔지니어

- 코드 리뷰, 내부 세미나 및 기술 명세서 작성 등을 통해 개발 문화를 조성하며 8명의 소프트웨어 개발자 팀 운영
- 개인 목표, 도전 과제 및 진행 상황을 논의하기 위해 정기적인 일대일 회의를 실시하여 지원적이고 성장 지향적인 환경 조성
- 프론트엔드 프로젝트에 모노레포 아키텍처 구현으로 코드 재사용성 향상 으로 개발 시간 단축 및 유지 보수성 개선
- GitHub Action을 사용하여 CI/CD 구축으로 워크플로를 자동화하고 배포 효율성 향상
- React Profiler를 사용하여 렌더링을 분석함으로써 React.js 프로젝트의 성능을 60% 최적화하여 사용자 경험 향상
- WebRTC API를 활용하여 웹 브라우저 간의 실시간 오디오 및 비디오 통신을 가능하게 하여 원활하고 효율적인 통신 지원
- 팀원들과 협력하여 음성 인식 처리를 개선하고 처리 시간 1.2초 단축

테크리드

- Undergraduate Researcher, Seebauer Lab
- President of Omega Chi Epsilon, a national chemical engineering honor society

화학공학과

강병진

링크드인

포트폴리오

Github

YouTube: Code ON

블로그

개발자가 세상을 바꿀 수 있다고 믿습니다
#개발자 #사이드프로젝트 

스토리북을 활용한 UI 테스트와 디자인시스템 강의

댓글 0

비슷한 게시물

주간 인기 TOP 10

추천 프로필