카카오헤어샵

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
오버레이 권한을 받았는데 오버레이가 안됩니다. - 제 폰에선 되는데요??
카카오헤어샵 Android 개발자가 오버레이 기능 개발 중 겪은 문제를 공유하는 글입니다. 개발자 본인과 동료의 폰에서는 정상 작동하던 오버레이 기능이 기획자의 폰에서는 작동하지 않는 현상이 발생했습니다. 특히, 배포용 빌드에서 문제가 두드러졌으며, '다른 앱 위에 표시' 권한이 활성화되어 있음에도 불구하고 오버레이 기능 사용 시 권한이 꺼지는 증상을 발견했습니다. 이 문제는 개발 환경과 배포 환경 간의 차이, 특정 기기나 OS 버전과의 호환성 문제 등 다양한 원인을 추측하게 하며, 문제 해결을 위한 디버깅 과정을 상세히 설명하고 있습니다.
Android오버레이권한
카카오헤어샵·2024년 4월 24일
Frontend
카카오헤어샵에 Compose 적용하기 - xml 에서 Compose 로 가는 여정길
카카오헤어샵 Android 팀에서 기존 XML 기반 UI를 Jetpack Compose로 전환하는 여정을 공유합니다. 최신 트렌드인 선언형 UI를 적용하기 위해 마이페이지와 설정 화면을 우선적으로 개선 대상으로 선정했습니다. 이 과정에서 커스텀 폰트 적용, 반복되는 UI 로직 관리, 로컬 데이터 기반 화면 구현 등 세 가지 주요 문제에 직면했습니다. 이에 대한 해결책으로 Color, Font, Text System 가이드를 설계하고, 코드의 직관성, 확장성, 가독성을 높이는 방안을 모색했습니다. 본 글은 이러한 도입 배경, 직면한 문제점, 그리고 이를 해결하기 위한 시스템 가이드 설계 과정을 상세히 다룹니다.
Jetpack ComposeAndroidUI
카카오헤어샵·2024년 2월 8일
Frontend
앱 진입로직 개선(feat. RxSwift)
카카오헤어샵 iOS 개발자가 앱 진입로직에서 발생한 버그 해결 과정을 공유하는 글입니다. 앱 진입로직은 홈 화면 진입 전 보안, 로그인, 업데이트 등 8가지 항목을 체크하고, 하나라도 실패하면 에러를 핸들링하는 로직입니다. 최근 서버 장애 시 iOS 앱에서 네트워크 에러 팝업이 뜨지 않고 스플래시 화면에서 무한 대기하는 버그가 발견되었습니다. 기존 코드를 분석한 결과, RxSwift의 zip operator를 사용하여 여러 비동기 작업을 동시에 처리하는 과정에서 발생한 문제임을 확인하고 해결 방안을 모색합니다.
iOSRxSwift앱 진입로직
카카오헤어샵·2023년 12월 14일
Frontend
Form(폼) 요소에 대한 검증 및 오류 처리 개선 - 파트너스는 모든 페이지에 폼이 있고, 우린 모든 페이지를 수정해야 합니다
파트너스 사이트의 프론트엔드 개발팀은 모든 페이지에 존재하는 폼 요소의 검증 및 오류 처리 방식을 개선했습니다. 기존에는 각 페이지마다 독립적인 코드를 사용하여 코드 재사용이 어렵고, 새로운 페이지 개발 시 많은 시간과 노력이 소요되는 문제가 있었습니다. 이를 해결하기 위해 폼 요소를 공통 컴포넌트로 제작하여 UI 일관성을 유지하고 개발 속도를 높이는 것을 목표로 삼았습니다. 라이브러리로는 formik을 계속 사용하되, 변경 및 유지보수가 용이하도록 코드를 개선하는 방향으로 리팩토링을 진행했습니다. 코드 개선 전에는 하나의 입력값을 생성하기 위해 반복적인 코드가 많이 사용되어 가독성이 떨어졌으나, 공통 컴포넌트 도입을 통해 이러한 문제를 해결하고 효율적인 개발 환경을 구축하고자 합니다.
Form검증오류 처리
카카오헤어샵·2023년 11월 23일
Frontend
카카오헤어샵 vanilla-extract 도입기 - 카카오헤어샵 마크업 내재화 이야기
카카오헤어샵 플랫폼 개발팀은 외부 마크업 개발 방식에서 발생하는 비효율성을 해결하기 위해 마크업 내재화를 결정했습니다. 기존에는 외부 개발자에게 HTML, CSS 작업을 요청했으나, 기술 스택 불일치, 단일 SCSS 파일 관리의 비효율성, 커뮤니케이션 비용 증가 등의 문제가 있었습니다. 이에 따라 프론트엔드 개발팀은 마크업 작업을 내재화하고, 점진적으로 디자인 시스템을 구축하는 방향을 선택했습니다. 첫 단계로, 기존의 단일 SCSS 파일을 페이지 단위로 분리하고 module.css를 도입하여 화면 단위 스타일을 구분함으로써 기능 개발에 차질 없이 진행하면서도 코드 관리의 효율성을 높이는 방안을 모색했습니다.
카카오헤어샵마크업 내재화CSS
카카오헤어샵·2023년 11월 1일
Frontend
우리는 한다 리팩토링을 - UIKit+RxSwift 에서 SwiftUI+Combine 로의 여정
카카오헤어샵 iOS 개발팀이 UIKit+RxSwift 기반의 디자이너 앱을 SwiftUI+Combine으로 리팩토링하는 과정을 공유합니다. 볼륨이 작아 빠르게 대응 가능하고 SwiftUI와 Combine의 완성도가 높아져 실무 적용이 가능하다고 판단하여 프로젝트를 시작했습니다. 초기에는 MVVM 디자인 패턴을 유지하며 UI만 SwiftUI로 변경하고 RxSwift를 Combine으로 옮기는 단순한 접근을 생각했으나, 실제 진행하며 API 호출 부분을 Combine의 Future와 eraseToAnyPublisher를 사용하여 성공/실패에 따른 결과값을 Publisher 형태로 깔끔하게 내보내는 방식으로 변경했습니다. 이 글은 기존 기술 스택에서 최신 기술 스택으로 전환하는 과정에서의 경험과 기술적인 변경 사항을 다룹니다.
SwiftUICombineRxSwift
카카오헤어샵·2023년 1월 19일
Frontend
파트너스 레거시 코드 리팩토링 (2) - api 분리, HOC 걷어내기, react-query로 데이터 처리하기
이 글은 파트너스 서비스의 레거시 코드를 리팩토링하는 두 번째 이야기로, 프론트엔드 개발자가 겪었던 문제점과 해결 과정을 공유합니다. 기존에는 Redux의 덕스 패턴을 사용하여 전역 상태 관리와 API 로직을 함께 처리했으나, API 엔드포인트를 별도로 분리할 필요성을 느꼈습니다. API 파일 작성 방식을 클래스형과 함수형으로 비교 분석한 결과, 직관성과 개발 편의성을 고려하여 클래스형으로 API를 분리하기로 결정했습니다. 이 과정에서 React-query 도입을 위한 기반을 마련하고 코드의 구조를 개선하는 데 중점을 두었습니다.
React리팩토링API
카카오헤어샵·2023년 1월 18일
Frontend
파트너스 레거시 코드 리팩토링 - 타입스크립트, 리액트쿼리를 도입하다
카카오헤어샵의 파트너스 서비스 웹사이트에서 레거시 코드 리팩토링을 진행한 경험을 공유합니다. 프로젝트 규모가 커지고 의존성이 복잡해지면서 발생할 수 있는 라이브러리 및 프레임워크 버전 관리의 어려움, 그리고 수정 시 예측 불가능한 에러 발생 가능성 때문에 리팩토링의 필요성을 인지했습니다. 특히, 리브랜딩 및 기능 확장을 앞두고 개발 리소스가 충분하다고 판단하여 리팩토링을 결정했습니다. 리팩토링 범위는 작업될 페이지로 한정했으며, Typescript, React-query, 함수형 컴포넌트 도입을 통해 휴먼 에러 감소, 서버 데이터 효율적 관리, 코드 가독성 및 직관성 개선을 목표로 했습니다. 이를 통해 팀 내 프론트 코드 컨벤션을 확립하고 ESLint 규칙을 정립하는 성과를 얻었습니다.
레거시 코드리팩토링TypeScript
카카오헤어샵·2022년 12월 29일
Frontend
LiveData에서 Flow로 변형해보기 - LiveData -> Flow(StateFlow & SharedFlow)
본 글은 Android 개발자가 기존 LiveData를 Kotlin의 Flow(StateFlow, SharedFlow)로 마이그레이션하는 경험을 공유합니다. LiveData는 생명주기 인식, 메모리 누수 방지, 최신 데이터 유지 등의 장점을 가지지만 Android 플랫폼에 종속적이라는 단점이 있습니다. 반면 Flow는 순수 Kotlin 라이브러리로, zip, flatMapMerge 등 다양한 함수를 활용하여 더 편리한 기능 구현이 가능합니다. 글에서는 LiveData의 장점을 설명하고, Flow로 전환하려는 이유와 함께 전환 시 발생할 수 있는 고려사항에 대해 논의합니다. 특히 LiveData의 생명주기 인식 기능이 Flow에서는 직접적으로 지원되지 않는다는 점을 지적하며, 이에 대한 해결 방안 모색의 필요성을 시사합니다.
LiveDataFlowStateFlow
카카오헤어샵·2022년 10월 28일
Frontend
유연하게 프로젝트별 개발환경 자동 설정하기(nvm) - nvm deeper shell integration 활용
카카오헤어샵의 프론트엔드 개발팀은 여러 개의 프로젝트를 동시에 개발하며 각기 다른 Node.js 버전을 사용해야 하는 상황에 직면했습니다. 프로젝트마다 Node.js 버전을 삭제하고 재설치하는 번거로움과 이로 인한 잠재적인 오류를 해결하기 위해 nvm(Node Version Manager)을 도입했습니다. nvm은 사용자별로 설치되며 쉘별로 호출되어, 여러 Node.js 버전을 쉽게 설치하고 전환할 수 있게 해줍니다. 이를 통해 개발자들은 프로젝트별로 최적의 Node.js 버전을 수동으로 설정하는 수고를 덜고, 개발 생산성을 향상시킬 수 있었습니다. 특히, nvm의 'deeper shell integration' 기능을 활용하여 더욱 유연하고 자동화된 개발 환경 설정을 구축하는 방법을 공유합니다.
nvmNode.js개발 환경
카카오헤어샵·2022년 10월 27일
Frontend
프로젝트에 테스팅 도입하기 - 삽질의 기억
이 글은 React 기반의 파트너스 프로젝트에 테스트 도입 경험을 공유합니다. 잦은 Form 입력과 상호 의존적인 UI로 인해 Side Effect 관리가 어렵고, Javascript의 동적 타입 체크로 인한 런타임 에러 감지의 한계를 극복하기 위해 테스트 도입을 결정했습니다. 테스트는 사용자의 최종 UI 경험에 초점을 맞춰, 컴포넌트 내부 로직보다는 사용자의 액션에 따른 UI 변화를 검증하는 방식으로 진행됩니다. 또한, 개별 컴포넌트가 아닌 Page 전체를 렌더링하여 컴포넌트 간 통합 작동 시 발생할 수 있는 문제를 사전에 감지하는 것을 목표로 합니다. 이를 통해 개발 단계에서 에러를 미리 발견하고 안정적인 서비스 개발에 기여하고자 합니다.
ReactTestingreact-testing-library
카카오헤어샵·2021년 8월 17일
Frontend
카카오헤어샵 안드로이드 커스텀 폰트 적용기 - KHDS-light, regular, medium, bold
카카오헤어샵 안드로이드 앱에서 커스텀 폰트(KHDS)를 적용하며 겪었던 경험을 공유하는 글입니다. 안드로이드 기본 폰트(Roboto) 사용 시 디자인 일관성 유지의 어려움을 해결하기 위해 커스텀 폰트 적용을 시도했습니다. 글에서는 폰트 리소스 포함 방법, 실제 코드 적용 예시, 그리고 OTF 폰트 사용을 권장하는 이유(TTF 폰트의 찌그러짐 현상 및 용량 문제)를 설명합니다. 또한, 폰트 가중치(fontWeight) 설정에 대한 팁도 제공하여 안드로이드 앱에서 디자인의 일관성을 높이고자 하는 개발자들에게 유용한 정보를 제공합니다.
안드로이드커스텀 폰트폰트 적용
카카오헤어샵·2021년 1월 6일