쏘카

RSS

게시글: 73
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
쏘카 디자인 시스템 2.0 개발 과정 중 웹 프론트엔드 개발 경험을 공유하는 글입니다. 컴포넌트 아키텍처 설계 목적, Hook과 객체 활용, 합성 컴포넌트 및 명령형 API 사용법을 상세히 설명합니다. 또한, 패키지 전략으로 트리쉐이킹을 통한 번들 크기 최적화 방안을 제시하며, LLM을 활용한 Figma MCP 자동화 사례를 소개합니다. 디자인 시스템 구축 시 고려해야 할 기술적 접근 방식과 AI 기술의 접목 가능성을 보여주는 내용입니다.
디자인 시스템React컴포넌트 아키텍처
쏘카·2026년 2월 24일
Frontend
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카 디자인 시스템 2.0 개발 과정을 다루는 글입니다. 이 글은 디자인 시스템을 단순히 UI 컴포넌트 라이브러리로만 보지 않고, 설계, 연동, 운영까지 포함하는 '시스템'으로 확장하여 접근합니다. 특히 Figma Plugin과 Figma Code Connect를 활용하여 디자인과 개발 간의 연동을 강화하고, 릴리스와 피드백 루프를 포함한 운영 프로세스를 통해 지속적인 품질 관리를 추구하는 방안을 제시합니다. 이를 통해 개발 생산성 향상과 일관된 사용자 경험 제공을 목표로 합니다.
디자인 시스템UI 컴포넌트Figma
쏘카·2026년 2월 23일
Frontend
쏘카프레임 - 앱 프레임워크와 개발자 경험
쏘카 모바일 개발팀은 2019년부터 이어온 앱 개편 개발 철학과 실행 과정을 소개합니다. 개발팀의 행복과 성장을 중요하게 생각하며, 이를 위해 잉여 시간 확보와 생산성 향상에 집중했습니다. '쏘카프레임'이라는 네이티브 앱 개발 프레임워크는 Android와 iOS 개발 시 동일한 추상화 위에서 앱을 개발할 수 있도록 지원합니다. 이 프레임워크는 개발자의 사고방식을 가이드하고 논리를 규격화하며, 플랫폼 및 라이브러리 사용성을 통일하고 예외 처리를 정규화합니다. 엄격한 코딩 컨벤션과 제식화된 기반으로 코드의 일관성을 높여 인지적 축약을 유도하고 실수를 줄입니다. 이를 통해 개발 과정의 불확실성을 최소화하고, 서비스 조달 시간을 단축하며, 팀원 간 협업 및 코드 수정 용이성을 높여 개발자 경험을 향상시키는 것을 목표로 합니다.
네이티브 앱 개발프레임워크개발자 경험
쏘카·2026년 1월 7일
Frontend
쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
쏘카 기술 블로그의 '쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기' 글은 모노레포 환경에서 프로젝트 설정의 비효율성을 해결하기 위한 방안을 제시합니다. 규모가 커지면서 발생하는 중복 코드와 멀티레포 환경에서의 공통 라이브러리 업데이트 문제를 지적하며, 일관성 확보를 위한 모노레포 도입의 필요성을 설명합니다. 특히, Code Generator를 활용하여 반복적인 프로젝트 세팅 작업을 자동화함으로써 개발 생산성을 향상시키는 방법에 초점을 맞춥니다. 이 글은 모노레포 도입을 고려하거나 프로젝트 설정 자동화에 관심 있는 프론트엔드 개발자에게 유용한 정보를 제공합니다.
모노레포프로젝트 세팅Code Generator
쏘카·2024년 8월 29일
Frontend
누가 내 쿠키를 먹었을까?
본 글은 iOS 웹뷰 환경에서 세션쿠키가 소실되는 현상의 원인과 해결 방법을 다룹니다. 쏘카의 실제 경험을 바탕으로, iOS 앱이 백그라운드 상태에서 메모리 정리를 수행할 때 웹뷰에 저장된 세션쿠키가 함께 삭제되는 문제를 지적합니다. 이는 iOS 15 버전 이상에서 주로 발생하며, Safari에서도 동일한 현상이 관찰되었습니다. 문제 해결을 위해 세션쿠키 대신 다른 저장 방식을 고려하거나, 웹뷰 로딩 시 쿠키를 재설정하는 등의 방법을 적용할 수 있습니다. 이 글은 웹뷰 환경에서 쿠키 관련 이슈를 겪는 프론트엔드 및 네이티브 개발자에게 유용한 정보를 제공합니다.
iOS웹뷰세션쿠키
쏘카·2024년 7월 15일
Frontend
쏘카플랜 개편기
쏘카플랜 서비스 개편 과정을 공유하는 글입니다. 짧은 일정 속에서 마감일에 쫓기며 기능 구현과 코드 품질 사이에서 고민하는 프론트엔드 개발자들에게 유용한 내용을 담고 있습니다. 쏘카플랜은 한 달 단위 차량 대여 서비스로, 이번 개편에서는 구독 기능 추가, 디자인 개선, 차량 필터 강화 등이 주요 내용이었습니다. 개발자는 React v18, Next.js v13을 적용하며 코드 마이그레이션 작업을 진행했습니다. 초기 일정 예측은 3주였으나, 점진적으로 추가되는 요구사항과 복잡한 로직, 디자인 구현 범위로 인해 예상보다 더 많은 시간이 소요되었습니다. 이 글은 실제 개발 과정에서의 어려움과 현실적인 문제들을 보여주며, 특히 프론트엔드 개발자가 겪을 수 있는 일정 산출의 어려움에 대해 이야기합니다.
쏘카플랜서비스 개편React
쏘카·2024년 3월 6일
Frontend
쏘카의 웹 팀에 관하여
쏘카의 웹 프론트엔드 개발팀(웹 팀)에 대한 소개 글입니다. 2020년 11월 신설된 웹 팀은 현재 17명으로 성장했으며, 전반적인 웹 프론트엔드 거버넌스 관리, 기술 도입 검토, 디자인 시스템 및 공통 라이브러리 관리, 채용 지원, 백오피스 개발 지원, 신규 입사자 온보딩, 타 서비스 개발 협업, 코드 리뷰 등의 업무를 수행합니다. 웹 프론트엔드 개발자는 쏘카의 다양한 서비스 앱(쏘카, 핸들러, 차케어 등)에서 웹 뷰를 활용하여 개발 업무를 담당하며, 메인 화면은 네이티브로 구현되어 있지만 일부 서비스는 웹 뷰로 연결됩니다. 이 글은 쏘카의 웹 프론트엔드 직무와 팀 문화에 관심 있는 사람들에게 유용한 정보를 제공합니다.
쏘카Frontend웹 팀
쏘카·2024년 1월 4일
Frontend
React Custom Icon Component 개발기
쏘카 웹 프론트엔드 팀에서 공통으로 사용하는 React Icon Component 개발 과정을 공유하는 글입니다. 기존 아이콘 등록 방식의 문제점을 분석하고, 아이콘 파일로 사용되는 SVG의 특징을 활용하여 개발자 경험(Developer Experience)을 개선하는 데 중점을 둡니다. 이 글은 웹 프론트엔드 개발자, 웹 디자이너, 그리고 웹 개발에 관심 있는 사람들을 대상으로 하며, 아이콘 컴포넌트 개발의 필요성부터 실제 개발 과정까지 상세하게 다룹니다. 목표는 아이콘 등록 프로세스를 효율화하여 개발 생산성을 높이는 것입니다.
ReactIcon ComponentDeveloper Experience
쏘카·2022년 9월 6일
Frontend
Android Studio 플러그인으로 코드 자동 리팩토링하기
이 글은 Android Studio 플러그인을 활용하여 대량의 Kotlin 코드를 자동 리팩토링하는 방법을 다룹니다. 쏘카 안드로이드 팀은 View Binding으로 전환하면서 발생한 복잡하고 반복적인 코드 수정 작업을 IntelliJ Platform Plugin을 통해 효율적으로 해결했습니다. 기존에는 수십에서 수백 개의 파일에 걸쳐 수동으로 코드를 수정해야 했기에 예상보다 많은 시간이 소요되고 실수 발생 가능성이 높았지만, 플러그인 개발을 통해 이러한 반복 작업을 자동화하여 시간과 노력을 크게 절감할 수 있었습니다. 이 경험을 바탕으로 코드 수정의 효율성을 높이는 플러그인 개발의 유용성을 강조하며, 유사한 상황에 처한 개발자들에게 유용한 정보를 제공합니다.
Android Studio플러그인코드 자동화
쏘카·2022년 2월 3일
Frontend
[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (2탄)
본 글은 쏘카의 디자인 시스템 구축 경험을 공유하는 2탄으로, 컴포넌트 구축 과정에서의 어려움과 해결 과정을 다룹니다. 기존 프로덕트 규모가 있는 상태에서 디자인 시스템을 도입하는 것은 처음부터 시작하는 것보다 어렵지만, 팀원들의 공감과 지지 덕분에 해결책을 찾아 나갈 수 있었습니다. 특히, 디자인 시스템 전담 팀이 없는 상황에서 기존 업무와 병행하며 발생하는 시간 부족 문제를 겪었지만, 이를 극복하기 위한 고민과 노력을 통해 컴포넌트 구축 프로세스와 개발 우선순위 설정의 중요성을 강조합니다. 디자인 시스템 구축에 대한 현실적인 어려움과 이를 극복하려는 팀의 노력을 통해, 효율적인 컴포넌트 개발 및 활용 방안을 모색합니다.
컴포넌트디자인 시스템UI 컴포넌트
쏘카·2020년 9월 8일
Frontend
[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)
쏘카 디자인팀은 서비스 고도화에 따라 반복되는 UI 개발의 비효율성을 해결하기 위해 디자인 시스템과 컴포넌트 도입의 필요성을 절감했습니다. 디자이너는 Sketch 심볼 기능을 활용하여 UI 재사용의 편의성을 높였지만, 상태와 용도, 인터랙션 정의에는 한계가 있어 UI 스타일 가이드 문서로 규칙을 공유해야 했습니다. 개발자는 기존 코드를 재사용하거나, 해당 UI의 출처를 알 수 없을 경우 새로 개발하는 방식으로 UI를 관리했습니다. 본 글은 디자이너와 개발자가 컴포넌트를 정의하고 개발하는 과정에서 겪는 비하인드 스토리를 공유하며, 디자인 시스템 구축 초기 단계의 팀이나 기존 시스템을 가진 팀에게 유용한 정보를 제공하고자 합니다.
디자인 시스템컴포넌트UI
쏘카·2020년 7월 30일
Frontend
[SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (2탄)
쏘카 프로덕트 디자인팀에서 다크 모드 구현을 위한 컬러 시스템 구축 과정을 공유하는 글입니다. 기존의 명도와 기능에 따른 컬러 정의 방식에서 벗어나, 명도/기능 기반의 '베이직 컬러'와 UI 요소에 직접 적용되는 '시멘틱 컬러'로 컬러 시스템을 재정의했습니다. 특히 라이트 모드와 다크 모드 간 1:1 대응을 고려하여 컬러 시스템을 구축했으며, 이는 디자인 시스템의 일관성과 확장성을 높이는 데 기여합니다. 글에서는 베이직 컬러와 시멘틱 컬러의 구조 변경 및 구축 과정을 상세히 설명하며, 디자인 시스템 구축에 대한 실질적인 인사이트를 제공합니다.
디자인 시스템다크 모드컬러 시스템
쏘카·2020년 7월 21일
Frontend
[SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (1탄)
쏘카 프로덕트 디자인팀에서 다크 모드 도입을 검토하게 된 이유와 디자인 시스템과의 연관성을 다룬 글입니다. 다크 모드는 저시력자를 위한 접근성 향상, 어두운 환경에서의 사용성 개선, 배터리 절감 등 다양한 이점을 제공하며, 특히 iOS13 출시 이후 많은 앱에서 도입되었습니다. 쏘카는 경쟁사와의 차별화 및 사용자 경험 강화를 위해 다크 모드 도입을 결정했으며, 이를 위해 구글의 Material Design과 애플의 Human Interface Guidelines 등 주요 가이드라인을 분석하고 다크 모드를 적용한 앱들을 연구했습니다. 이 과정에서 디자인 시스템과의 통합을 통해 일관성 있는 사용자 경험을 제공하는 것이 중요함을 강조합니다.
다크 모드디자인 시스템UI
쏘카·2020년 7월 10일
Frontend
[SOCAR FRAME 만들기 #1] 쏘카의 디자인 시스템 맛보기
쏘카 프로덕트 디자인팀에서 구축 중인 디자인 시스템 'SOCAR FRAME'의 시작 과정을 공유하는 글입니다. 이 글은 디자인 시스템 구축 경험이 있거나 검토 중인 실무자를 대상으로 하며, 결과물보다는 디자인 시스템 구축 과정에서 겪은 고민, 어려움, 극복 과정, 그리고 디자이너와 개발자의 협업 방식에 초점을 맞춥니다. 다크 모드 동시 진행, 컴포넌트 개발 우선순위 결정, 우선순위에서 밀릴 때의 대처 방안 등 실제적인 노하우를 공유하고자 합니다. SOCAR FRAME 사이트 공개와 함께 앞으로 구축 과정을 상세히 풀어낼 것을 예고합니다.
디자인 시스템SOCAR FRAMEUI 컴포넌트
쏘카·2020년 6월 22일