Toss Frontend Accelerator 5기 Pre-Course 회고

토스 ACC(Frontend Accelerator) 지원 기회가 생겨 지원서를 작성하게 되었다. 단순히 이력을 나열하는 과정이 아니라, 그동안의 선택과 경험을 하나씩 복기해야 하는 질문들이 많아 작성하는 데 시간이 꽤 걸렸다. 질문에 답하다 보니 ‘아, 내가 이런 고민들을 안고 일해왔구나’ 하고 스스로를 다시 돌아보게 되었다. 지원을 마치고 다행히 본과정 전에 있는 프리코스 과정에는 합류할 수 있게 되었다. 이전 기수분들의 후기를 찾아보며 가장 궁금했던 점은, 이 과정이 단순히 기술 스택을 가르치는 교육이 아니라 코드를 짜는 사람의 사고방식을 다룬다는 점이었다. 연차가 쌓이면서 “이 정도면 잘 구현했다고 말할 수 있을까?”라는 질문에 스스로 확신 있게 답하지 못하는 순간들이 늘고 있었다. 코드는 분명 돌..

• format_list_bulleted 🗂 WIL
• · 2026. 2. 8.

TanStack Table로 세로 병합 테이블 만들기

이번에 어드민 툴 개발을 진행하면서 테이블 구현이 필요해 TanStack Table을 사용하게 되었다.디자인 시스템용 테이블 컴포넌트로 만들었는데, 정렬, 리사이징처럼 TanStack Table이 제공하는 기본 기능을 그대로 가져다 쓰면 되는 부분은 크게 어렵지 않았다. 다만 문제는 세로 병합을 on/off 할 수 있는 옵션이었다. 헤더 쪽에는 이미 rowSpan API가 존재해서 헤더 그룹핑은 비교적 쉽게 처리가 되는데, tbody 영역에는 같은 기능이 없어서 직접 구현이 필요했다. 그래서 어떤 컬럼이든 필요할 때만 rowSpan을 켰다가 끌 수 있는 방식으로 구현을 한 번 만들어보았다.1. 기본 아이디어처음에 내가 생각한 구조는 컬럼 메타에 enableRowSpan 옵션을 추가해서 열 단위로 병합 여..

• format_list_bulleted 🗂 WIL
• · 2025. 12. 7.

배포 프로세스 작게 개선해보기

문제점최근 여러 패키지를 묶어 데스크톱 앱까지 패키징 하는 배포 작업을 진행하면서 가장 고민되었던 부분이 버전 관리였다. 우리 프로젝트는 웹 빌드만으로 끝나는 구조가 아니라 최종적으로 Electron 기반 데스크톱 앱까지 생성해야 하는데, 데스크톱 앱의 버전, 배포 후 노션에 정리하는 여러 배포 정보까지 모두 수동으로 관리하고 있었다. 초기에는 큰 문제가 없었지만 작업량이 늘어날수록 부담도 함께 커졌고, 팀에서도 동일한 불편이 반복적으로 언급되면서 더 효율적인 방식이 필요하다는 생각이 들었다.여기에 아직 확립된 버전 체계도 없는 상태였다. 초기 스타트업 특성상 고객사의 요청에 따라 기능을 빠르게 커스텀하거나 POC를 반복하는 일이 많아, 하나의 기능을 기준으로 여러 버전이 계속해서 생성되는 상황이었다. ..

• format_list_bulleted 🗂 WIL
• · 2025. 11. 23.

Framer Motion으로 본 Rotating Text 레이아웃 처리 방식

최근 전 직장에서 함께했던 멋진 동료분이 발표자로 참여한 오픈소스를 주제로 한 밋업에 다녀왔다. 발표에서 소개된 오픈소스들을 살펴보다가, React Bits 에서 최근 내가 디자인 시스템에서 구현했던 텍스트 애니메이션 컴포넌트와 동일한 동작을 하는 컴포넌트를 발견했다. 시각적으로 자연스럽게 보이기 위해 고려해야 할 점이 많았던 컴포넌트였는데, 다음과 같은 디테일한 문제들을 해결해야 했다.1. 단어가 바뀔 때 문장 전체가 흔들리는 문제예를 들어“오늘은 피자를 먹을까요?”“오늘은 샤브샤브를 먹을까요?”두 문장은 동적으로 교체되는 단어(볼드로 표시된 부분)만 다르지만, 이 단어의 폭이 달라지는 순간 뒤쪽 텍스트가 좌우로 흔들려 보인다.원인텍스트가 바뀌면 해당 span의 width가 즉시 재계산되면서 오른쪽 텍..

• format_list_bulleted 🗂 WIL
• · 2025. 11. 16.

디자인 토큰 중복 없애기

우리 회사는 여러 개의 프로젝트 레포지토리를 운영하고 있는데, 모바일 앱, 웹 서비스 등 각각의 프로젝트마다 Tailwind config 파일이 있었고, 모든 파일에 동일한 디자인 토큰 값들이 중복되어 있었다. 문제는 디자인 토큰이 변경될 때마다 각 레포의 tailwind.config.js에 하드코딩된 값을 일일이 수정해야 했다는 점이었다. 입사 후 처음 디자인팀과 진행한 회의에서 여러 레포를 일일이 수정해야 하는 비효율이 논의되었고, 이를 개선해보고자 하였다.해결책: 디자인 토큰을 패키지로 분리하기중복된 토큰을 한 곳에서 관리할 수 있는 구조를 만들기 위해 여러 고민을 했었는데, 결론적으로는 npm 패키지로 분리하는 게 가장 명확했다. 마침 Tailwind v4로 마이그레이션을 마친 상태였고, @the..

• format_list_bulleted 🗂 WIL
• · 2025. 11. 8.

이번 주에 알게 된 것들

1. Presigned URL의 만료 메커니즘최근 이미지 프리로딩 기능을 구현하면서 403 Forbidden 에러를 만났다. S3에서 발급받은 Presigned URL로 이미지를 미리 프리로드해 두었는데, 화면에서 실제로 표시하려는 시점에 URL이 만료되어 있었던 것이다. Presigned URL은 보통 다음 두 가지 방식 중 하나로 만료 시각 정보를 담고 있었고, 이 정보를 이용해 URL의 만료 시각을 계산하는 간단한 함수를 만들었다.Azure: se 파라미터에 만료 시각이 직접 명시AWS / GCP: 발급 시각과 유효기간의 합으로 계산function getExpiryFromPresignedUrl(urlStr: string): number | undefined { const url = new URL(..

• format_list_bulleted 🗂 WIL
• · 2025. 11. 2.