diff --git a/e2e/__snapshots__/about.spec.ts/desktop/about.html b/e2e/__snapshots__/about.spec.ts/desktop/about.html
index 26b5197c..9a90186d 100644
--- a/e2e/__snapshots__/about.spec.ts/desktop/about.html
+++ b/e2e/__snapshots__/about.spec.ts/desktop/about.html
@@ -1 +1 @@
-<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
+<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.oss.kr/notice/show/b6c4ed79-6435-444b-b4b0-debbb041354f" rel="noopener noreferrer" target="_blank">오픈소스 컨트리뷰션 Node.js - 과학기술정보통신부 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 - 산업통상자원부 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/about.spec.ts/desktop/about.png b/e2e/__snapshots__/about.spec.ts/desktop/about.png
index 4619637d..79790a37 100644
Binary files a/e2e/__snapshots__/about.spec.ts/desktop/about.png and b/e2e/__snapshots__/about.spec.ts/desktop/about.png differ
diff --git a/e2e/__snapshots__/about.spec.ts/mobile/about.html b/e2e/__snapshots__/about.spec.ts/mobile/about.html
index 26b5197c..9a90186d 100644
--- a/e2e/__snapshots__/about.spec.ts/mobile/about.html
+++ b/e2e/__snapshots__/about.spec.ts/mobile/about.html
@@ -1 +1 @@
-<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
+<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.oss.kr/notice/show/b6c4ed79-6435-444b-b4b0-debbb041354f" rel="noopener noreferrer" target="_blank">오픈소스 컨트리뷰션 Node.js - 과학기술정보통신부 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 - 산업통상자원부 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/about.spec.ts/mobile/about.png b/e2e/__snapshots__/about.spec.ts/mobile/about.png
index 0d89b19b..8d01896b 100644
Binary files a/e2e/__snapshots__/about.spec.ts/mobile/about.png and b/e2e/__snapshots__/about.spec.ts/mobile/about.png differ
diff --git a/src/features/about/activity/data/activity.ts b/src/features/about/activity/data/activity.ts
index ac21d6f9..b5d6d506 100644
--- a/src/features/about/activity/data/activity.ts
+++ b/src/features/about/activity/data/activity.ts
@@ -1,184 +1,12 @@
 import type { Activity } from '~/about/activity/models';
-import { ActivityType } from '~/about/activity/models';
-
-const award: Activity[] = [
-  {
-    type: ActivityType.award,
-    name: '오픈소스 컨트리뷰션 Node.js - 과학기술정보통신부 장관상',
-    url: 'https://www.oss.kr/notice/show/b6c4ed79-6435-444b-b4b0-debbb041354f',
-    startDate: 1731596400000,
-    endDate: 1731596400000,
-  },
-  {
-    type: ActivityType.award,
-    name: '산업융합 아이디어 경진대회 - 산업통상자원부 장관상',
-    url: 'https://blog.naver.com/1ilsang/221169478287',
-    startDate: 1505660400000,
-    endDate: 1513868400000,
-  },
-];
-
-const conference: Activity[] = [
-  {
-    type: ActivityType.conference,
-    name: '개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기',
-    url: 'https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook',
-    startDate: 1636556400000,
-    endDate: 1636556400000,
-  },
-];
-
-const seminar: Activity[] = [
-  {
-    type: ActivityType.seminar,
-    name: '모여봐요 오픈소스의 숲',
-    url: '/posts/geultto8-open-source-seminar',
-    startDate: 1693567800000,
-    endDate: 1693567800000,
-  },
-];
-
-const magazine: Activity[] = [
-  {
-    type: ActivityType.magazine,
-    name: 'Turborepo로 모노레포 개발 경험 향상하기',
-    url: 'https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo',
-    startDate: 1649948400000,
-    endDate: 1649948400000,
-  },
-];
-
-const hackathon: Activity[] = [
-  {
-    type: ActivityType.hackathon,
-    name: 'NAVER Campus Hackday',
-    url: 'https://blog.naver.com/1ilsang/221133223562',
-    startDate: 1511362800000,
-    endDate: 1511449200000,
-  },
-  {
-    type: ActivityType.hackathon,
-    name: 'UNITHON 6th',
-    url: 'https://blog.naver.com/1ilsang/221196038518',
-    startDate: 1516892400000,
-    endDate: 1517065200000,
-  },
-  {
-    type: ActivityType.hackathon,
-    name: 'AWS Amathon',
-    url: 'https://blog.naver.com/1ilsang/221325485852',
-    startDate: 1532012400000,
-    endDate: 1532098800000,
-  },
-  {
-    type: ActivityType.hackathon,
-    name: 'Spoqa 무쓸모톤',
-    url: 'https://blog.naver.com/1ilsang/221542063457',
-    startDate: 1558105200000,
-    endDate: 1558191600000,
-  },
-  {
-    type: ActivityType.hackathon,
-    name: 'Junction Asia 2023',
-    url: '/posts/junction2023',
-    startDate: 1692284400000,
-    endDate: 1692457200000,
-  },
-];
-
-const club: Activity[] = [
-  {
-    type: ActivityType.club,
-    name: 'WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작',
-    url: 'https://blog.naver.com/1ilsang/221080023998',
-    startDate: 1501513200000,
-    endDate: 1504018800000,
-  },
-  {
-    type: ActivityType.club,
-    name: 'Depromeet 3rd',
-    url: 'https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b',
-    startDate: 1504710000000,
-    endDate: 1527778800000,
-  },
-  {
-    type: ActivityType.club,
-    name: 'Server Dev Camp 3rd',
-    url: 'https://blog.naver.com/1ilsang/221226071204',
-    startDate: 1514818800000,
-    endDate: 1519138800000,
-  },
-  {
-    type: ActivityType.club,
-    name: 'Samsung Software Academy For Youth(SSAFY) 1st',
-    url: 'https://blog.naver.com/1ilsang/221546695268',
-    startDate: 1544367600000,
-    endDate: 1558796400000,
-  },
-  {
-    type: ActivityType.club,
-    name: 'Nexters 20th',
-    url: 'https://teamnexters.com/',
-    startDate: 1641394800000,
-    endDate: 1683730800000,
-  },
-  {
-    type: ActivityType.club,
-    name: 'Geultto 5th',
-    url: 'https://geultto.github.io/docs/intro',
-    startDate: 1604156400000,
-  },
-];
-
-const openSource: Activity[] = [
-  {
-    type: ActivityType.openSource,
-    name: 'Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류',
-    url: '/posts/mdn-ko-organizer',
-    startDate: 1709113159904,
-  },
-  {
-    type: ActivityType.openSource,
-    name: 'Road of CODEr - Maintainer',
-    url: 'https://github.com/Road-of-CODEr',
-    startDate: 1590937200000,
-  },
-  {
-    type: ActivityType.openSource,
-    name: 'Webpack.kr',
-    url: 'https://blog.naver.com/1ilsang/222517766844',
-    startDate: 1624374000000,
-  },
-  {
-    type: ActivityType.openSource,
-    name: 'MDN Web Docs',
-    url: 'https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang',
-    startDate: 1678374000000,
-  },
-  {
-    type: ActivityType.openSource,
-    name: 'React.dev',
-    url: 'https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang',
-    startDate: 1682866800000,
-  },
-];
-
-const SNS: Activity[] = [
-  {
-    type: ActivityType.sns,
-    name: '재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)',
-    url: 'https://www.youtube.com/watch?v=zr3WPa_aIcU&ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D',
-    startDate: 1648047600000,
-    endDate: 1648047600000,
-  },
-  {
-    type: ActivityType.sns,
-    name: '프런트엔드 밸런스 게임',
-    url: 'https://www.youtube.com/watch?v=mjeW7BUaU1c&t=312s&ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D',
-    startDate: 1684422000000,
-    endDate: 1684422000000,
-  },
-];
+import { award } from './award';
+import { conference } from './conference';
+import { club } from './club';
+import { hackathon } from './hackathon';
+import { magazine } from './magazine';
+import { openSource } from './opensource';
+import { seminar } from './seminar';
+import { SNS } from './sns';
 
 export const activityData: Activity[] = [
   ...award,
diff --git a/src/features/about/activity/data/award.ts b/src/features/about/activity/data/award.ts
new file mode 100644
index 00000000..fdeee8fc
--- /dev/null
+++ b/src/features/about/activity/data/award.ts
@@ -0,0 +1,16 @@
+import { ActivityType, type Activity } from '../models';
+
+export const award: Activity[] = [
+  {
+    name: '오픈소스 컨트리뷰션 Node.js - 과학기술정보통신부 장관상',
+    url: 'https://www.oss.kr/notice/show/b6c4ed79-6435-444b-b4b0-debbb041354f',
+    startDate: 1731596400000,
+    endDate: 1731596400000,
+  },
+  {
+    name: '산업융합 아이디어 경진대회 - 산업통상자원부 장관상',
+    url: 'https://blog.naver.com/1ilsang/221169478287',
+    startDate: 1505660400000,
+    endDate: 1513868400000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.award }));
diff --git a/src/features/about/activity/data/club.ts b/src/features/about/activity/data/club.ts
new file mode 100644
index 00000000..1812b42d
--- /dev/null
+++ b/src/features/about/activity/data/club.ts
@@ -0,0 +1,40 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const club: Activity[] = [
+  {
+    name: 'WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작',
+    url: 'https://blog.naver.com/1ilsang/221080023998',
+    startDate: 1501513200000,
+    endDate: 1504018800000,
+  },
+  {
+    name: 'Depromeet 3rd',
+    url: 'https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b',
+    startDate: 1504710000000,
+    endDate: 1527778800000,
+  },
+  {
+    name: 'Server Dev Camp 3rd',
+    url: 'https://blog.naver.com/1ilsang/221226071204',
+    startDate: 1514818800000,
+    endDate: 1519138800000,
+  },
+  {
+    name: 'Samsung Software Academy For Youth(SSAFY) 1st',
+    url: 'https://blog.naver.com/1ilsang/221546695268',
+    startDate: 1544367600000,
+    endDate: 1558796400000,
+  },
+  {
+    name: 'Nexters 20th',
+    url: 'https://teamnexters.com/',
+    startDate: 1641394800000,
+    endDate: 1683730800000,
+  },
+  {
+    name: 'Geultto 5th',
+    url: 'https://geultto.github.io/docs/intro',
+    startDate: 1604156400000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.club }));
diff --git a/src/features/about/activity/data/conference.ts b/src/features/about/activity/data/conference.ts
new file mode 100644
index 00000000..00a810f3
--- /dev/null
+++ b/src/features/about/activity/data/conference.ts
@@ -0,0 +1,11 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const conference: Activity[] = [
+  {
+    name: '개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기',
+    url: 'https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook',
+    startDate: 1636556400000,
+    endDate: 1636556400000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.conference }));
diff --git a/src/features/about/activity/data/hackathon.ts b/src/features/about/activity/data/hackathon.ts
new file mode 100644
index 00000000..38d160f5
--- /dev/null
+++ b/src/features/about/activity/data/hackathon.ts
@@ -0,0 +1,35 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const hackathon: Activity[] = [
+  {
+    name: 'NAVER Campus Hackday',
+    url: 'https://blog.naver.com/1ilsang/221133223562',
+    startDate: 1511362800000,
+    endDate: 1511449200000,
+  },
+  {
+    name: 'UNITHON 6th',
+    url: 'https://blog.naver.com/1ilsang/221196038518',
+    startDate: 1516892400000,
+    endDate: 1517065200000,
+  },
+  {
+    name: 'AWS Amathon',
+    url: 'https://blog.naver.com/1ilsang/221325485852',
+    startDate: 1532012400000,
+    endDate: 1532098800000,
+  },
+  {
+    name: 'Spoqa 무쓸모톤',
+    url: 'https://blog.naver.com/1ilsang/221542063457',
+    startDate: 1558105200000,
+    endDate: 1558191600000,
+  },
+  {
+    name: 'Junction Asia 2023',
+    url: '/posts/junction2023',
+    startDate: 1692284400000,
+    endDate: 1692457200000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.hackathon }));
diff --git a/src/features/about/activity/data/magazine.ts b/src/features/about/activity/data/magazine.ts
new file mode 100644
index 00000000..c5036002
--- /dev/null
+++ b/src/features/about/activity/data/magazine.ts
@@ -0,0 +1,11 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const magazine: Activity[] = [
+  {
+    name: 'Turborepo로 모노레포 개발 경험 향상하기',
+    url: 'https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo',
+    startDate: 1649948400000,
+    endDate: 1649948400000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.magazine }));
diff --git a/src/features/about/activity/data/opensource.ts b/src/features/about/activity/data/opensource.ts
new file mode 100644
index 00000000..bce956c7
--- /dev/null
+++ b/src/features/about/activity/data/opensource.ts
@@ -0,0 +1,30 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const openSource: Activity[] = [
+  {
+    name: 'Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류',
+    url: '/posts/mdn-ko-organizer',
+    startDate: 1709113159904,
+  },
+  {
+    name: 'Road of CODEr - Maintainer',
+    url: 'https://github.com/Road-of-CODEr',
+    startDate: 1590937200000,
+  },
+  {
+    name: 'Webpack.kr',
+    url: 'https://blog.naver.com/1ilsang/222517766844',
+    startDate: 1624374000000,
+  },
+  {
+    name: 'MDN Web Docs',
+    url: 'https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang+created%3A%3C2024-01-01+',
+    startDate: 1678374000000,
+  },
+  {
+    name: 'React.dev',
+    url: 'https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang',
+    startDate: 1682866800000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.openSource }));
diff --git a/src/features/about/activity/data/seminar.ts b/src/features/about/activity/data/seminar.ts
new file mode 100644
index 00000000..2b8bec26
--- /dev/null
+++ b/src/features/about/activity/data/seminar.ts
@@ -0,0 +1,11 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const seminar: Activity[] = [
+  {
+    name: '모여봐요 오픈소스의 숲',
+    url: '/posts/geultto8-open-source-seminar',
+    startDate: 1693567800000,
+    endDate: 1693567800000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.seminar }));
diff --git a/src/features/about/activity/data/sns.ts b/src/features/about/activity/data/sns.ts
new file mode 100644
index 00000000..8d17e13a
--- /dev/null
+++ b/src/features/about/activity/data/sns.ts
@@ -0,0 +1,19 @@
+import type { Activity } from '~/about/activity/models';
+import { ActivityType } from '~/about/activity/models';
+
+export const SNS: Activity[] = [
+  {
+    type: ActivityType.sns,
+    name: '재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)',
+    url: 'https://www.youtube.com/watch?v=zr3WPa_aIcU&ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D',
+    startDate: 1648047600000,
+    endDate: 1648047600000,
+  },
+  {
+    type: ActivityType.sns,
+    name: '프런트엔드 밸런스 게임',
+    url: 'https://www.youtube.com/watch?v=mjeW7BUaU1c&t=312s&ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D',
+    startDate: 1684422000000,
+    endDate: 1684422000000,
+  },
+].map((activity) => ({ ...activity, type: ActivityType.sns }));