쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.
#React#Next.js#SSR
12000
모든 블로그
대표 인기 포스트쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)121 조회121 조회 프론트엔드 프론트엔드
프론트엔드
프론트엔드 프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드 프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
쏘카
주요 카테고리 백엔드 · 프론트엔드 · DevOps
활동 요약
- 최근 30일
- 0개
- 평균 조회
- 22
- 누적 조회
- 1,250
- 전체 글
- 56개
- 마지막 발행
- 2026. 7. 27.
쏘카 기술 블로그 글 (16)
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
디자인 시스템 컴포넌트를 결합도에 따라 Hook 또는 객체와 Hook Adapter로 분리했습니다. Rollup 번들 전략과 LLM Instructions로 성능·재사용성·협업 일관성을 높였습니다.
#React#Next.js#디자인 시스템
300
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카프레임 2.0을 규칙·컴포넌트·Figma 연동·운영 프로세스를 아우르는 디자인 시스템으로 재정의했습니다. 플러그인과 Code Connect, Slot 설계로 전달 흐름을 개선하고 직군 간 정책 합의와 QC를 운영했습니다.
#디자인 시스템#Figma#Storybook
400
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카 디자인 시스템 2.0을 시스템 관점에서 설계하고 운영한 과정을 정리했습니다. Figma 연동과 직군 합의를 통해 디자인-개발 흐름과 품질 관리 체계를 강화했습니다.
#Figma#UI/UX#디자인 시스템
12100
쏘카프레임 - 블루투스 모듈
쏘카가 앱으로 차량과 이동수단을 제어하기 위해 공통 블루투스 추상화 계층인 쏘카프레임을 설계한 사례를 소개했습니다. iOS와 Android의 차이를 흡수해 확장성, 테스트 용이성, 재사용성을 높였습니다.
#Android#iOS#블루투스
4500
쏘카프레임 - 블루투스 모듈
쏘카프레임은 파편화된 iOS·Android 블루투스 API를 공통 추상화 계층으로 통합했습니다. 기기별 통신 복잡성을 모듈화해 확장성과 테스트 용이성을 확보했습니다.
#Bluetooth#iOS#Android
400
CLI로 환경변수 관리하기
환경 변수 관리가 파편화되고 .env 생성이 번거로워지는 문제를 정리했습니다. 쉘 스크립트 한계를 넘어 Node.js CLI로 자동 생성 흐름을 만든 과정을 소개했습니다.
#AWS#AWS Secrets Manager#CLI
2800
CLI로 환경변수 관리하기
AWS Secrets Manager 환경 변수를 수동으로 옮기는 불편을 Node.js CLI로 개선했습니다. npx 명령으로 인증부터 .env 생성까지 자동화한 과정을 공유합니다.
#AWS#AWS Secrets Manager#node.js
300
쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
쏘카 프론트엔드 팀이 멀티레포의 중복과 유지보수 문제를 해결하기 위해 모노레포와 Code Generator를 도입했습니다. 이를 통해 프로젝트 세팅 시간을 80% 이상 줄이고 코드 일관성과 온보딩 효율을 높였습니다.
#모노레포#Turborepo#Code Generator
3400
쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
Turborepo 모노레포에서 turbo/gen과 Plop 기반 코드 생성기로 프로젝트 설정을 자동화했습니다. 일관성을 높이고 신규 프로젝트 세팅 시간을 80% 이상 줄였습니다.
#Turborepo#모노레포#code generator
000
누가 내 쿠키를 먹었을까?
iOS 웹뷰에서 백그라운드 복귀 시 세션쿠키가 사라지는 문제를 분석했습니다. 지속쿠키로 전환해 이슈를 크게 줄였습니다.
#iOS#웹뷰#쿠키
2600
누가 내 쿠키를 먹었을까?
iOS 웹뷰의 백그라운드 메모리 정리로 세션쿠키가 소실되는 원인을 분석했습니다. 만료 기간을 둔 지속쿠키로 전환해 iOS 이슈를 약 99.66% 줄였습니다.
#iOS#web#쿠키
200
쏘카플랜 개편기
쏘카플랜 개편의 촉박한 일정과 QA 이슈 대응 경험을 정리했습니다. 조기 추상화보다 안정화 후 리팩토링과 점진적 개선을 제안합니다.
#React#Next.js#TypeScript
000
쏘카플랜 개편기
쏘카플랜 개편 과정에서 프론트엔드 일정 추정과 QA 대응, 레거시 개선 경험을 정리했습니다. 코로케이션과 WET 원칙으로 복잡한 화면과 도메인 로직을 단계적으로 분리했습니다.
#React#Next.js#TypeScript
4300
쏘카의 웹 팀에 관하여
쏘카 웹 팀의 역할과 협업 방식, 온보딩과 배포 프로세스를 소개한 글입니다. React 중심의 웹뷰 개발과 기술 도입 방식도 함께 정리했습니다.
#React#Next.js#Vue.js
2900
쏘카의 웹 팀에 관하여
쏘카 웹 팀의 조직 구조와 웹 뷰·백오피스 중심 개발 업무를 소개했습니다. 스프린트, QA·QC, 배포와 React 기반 기술 선택 방식을 설명합니다.
#React#Next.js#Vue.js
100