Velopers
모든 블로그
올리브영

올리브영

도메인oliveyoung.tech
주요 카테고리 백엔드 · 프론트엔드

활동 요약

대표 인기 포스트개발자가 알면 좋은 Redis 꿀팁 모음622 조회
최근 30일
2개
평균 조회
89
누적 조회
19,202
전체 글
215개
마지막 발행
2026. 10. 29.
블로그 방문

올리브영 기술 블로그 글 (58)

프론트엔드

올리브영 글로벌몰 주소 자동완성 및 검증 솔루션 도입기

글로벌몰의 복잡한 주소 입력 문제를 해결하기 위해 자동완성과 검증 기능을 도입했습니다. 그 결과 입력 시간과 배송보류를 줄이고 주문 완료율과 운영 효율을 높였습니다.

#검색#UI/UX#e-commerce
2500

프론트엔드

디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법

디자인 토큰을 Figma에서 정의하고 GitHub Actions와 token-transformer로 자동 변환하는 과정을 소개했습니다. 또한 Panda CSS에 맞게 토큰을 재구성해 디자인 시스템에 연결한 흐름을 설명했습니다.

#디자인 시스템#Figma#GitHub Actions
5900

프론트엔드

올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!

올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.

#React#TypeScript#Storybook
5000

프론트엔드

Front-end 개발자가 회고하는 기획전 개편

Next.js 기획전 개편에서 HTML 모듈 사이에 기존 상품 카드를 삽입하는 방법을 다뤘습니다. createRoot와 provider 중복 사용의 성능 영향을 측정해 설계 타당성을 검증했습니다.

#Next.js#React#Recoil
2900

프론트엔드

올리브영에서는 프론트엔드 개발자들이 이런 고민을 하는군요?

올리브영 프론트엔드 조직이 FEConf 2024 후원과 부스 운영으로 기술 브랜딩과 외부 소통을 강화했습니다. 부스 방문과 블로그 유입 성과를 얻으며, 현장 피드백도 서비스와 콘텐츠 개선에 활용했습니다.

#컨퍼런스#테크 블로그#MSA
4100

프론트엔드

올리브영 타입스크립트로 알아보는 타입과 타입 시스템

타입을 값의 집합으로 바라보며 타입스크립트의 타입 시스템과 타입 검사 원리를 설명했습니다. 서브타입, 구조적 타이핑, 다형성을 예제로 풀어내 실무 감각을 더했습니다.

#TypeScript#구조적 타이핑#서브타입
6800

프론트엔드

OLEA? Storybook을 활용한 올리브영의 디자인 시스템!

올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.

#Vue.js#Storybook#디자인 시스템
9500

프론트엔드

NEXT.JS와 CDN, 그리고 도커 이미지 경량화

Next.js를 ECS나 EKS에서 직접 운영할 때 CDN 연동과 도커 이미지 경량화 방법을 정리했습니다. 정적 자산은 CDN으로 분리하고, standalone 출력으로 배포 이미지를 줄이는 노하우를 소개했습니다.

#Next.js#CDN#Docker
4600

프론트엔드

올리브영 앱 스마트 스캐너 개선

올리브영 앱 스마트 스캐너의 바코드 인식률을 개선한 사례를 소개했습니다. iOS는 Vision, Android는 CameraX와 MLKit으로 전환해 이벤트 사용성을 높였습니다.

#iOS#Android#Vision framework
6900

프론트엔드

Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기

Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.

#Next.js#MSW#mocking
4100

프론트엔드

스위프트 매크로_2탄, 어떻게 쓰는건데요?

스위프트 매크로로 반복되는 생성자 코드를 줄인 사례를 소개했습니다. XMLParser와 JSON 문자열 파싱 중복을 매크로로 추상화한 경험을 공유했습니다.

#Swift#매크로#Codable
2400

프론트엔드

올리브영 셀프계산대 도입기

올리브영이 올영세일 혼잡과 계산 대기 문제를 줄이기 위해 셀프계산대를 도입했습니다. 기존 POS 코드를 활용해 빠르게 개발하고, 다국어·직원호출 기능으로 확산 가능성을 검증했습니다.

#Kotlin#WPF#KIOSK
27300

프론트엔드

스위프트 매크로_1탄, 스위프트 매크로가 뭐예요?

스위프트 5.9의 매크로 개념과 동작 방식을 소개했습니다. Xcode 코드 스니펫과 C 매크로와 비교해 장단점도 정리했습니다.

#Swift#Xcode#Swift Package Manager
3000

프론트엔드

UI 테스트 자동화 구조

UI 테스트 자동화가 많아질 때는 요소 중복과 유지보수 문제가 커진다고 설명했습니다. 페이지 개체 모델과 pytest fixture로 재사용성과 구조화를 개선하는 방법을 공유했습니다.

#pytest#POM#Selenium
6100

프론트엔드

W CARE 서비스 프론트엔드를 TDD로 개발해본 후기

W CARE 프론트엔드의 복잡한 월경 이벤트 판별 로직을 TDD로 개발한 사례를 소개했습니다. 경계값 테스트와 관심사 분리로 신뢰성과 유지보수성을 높였습니다.

#TDD#React#unit test
3300

프론트엔드

자바스크립트 이렇게 짜면 외않되?

V8 엔진의 JIT, 인라인 캐싱, 히든클래스를 바탕으로 자바스크립트 최적화 원리를 설명했습니다. 객체 구조를 통일하고 속성 초기화 순서를 맞추는 작성 습관을 제안했습니다.

#JavaScript#V8#JIT
3800

프론트엔드

마우스 드래그로 범위 지정과 리사이징 및 이동 구현하기

매월 반복되던 기획전 마크업 작업을 줄이기 위해 드래그 기반 제작툴을 구축했습니다. 영역 지정, 리사이징, 이동과 마크업 자동 완성으로 작업 효율을 높였습니다.

#JavaScript#CSS#web
4600

프론트엔드

픽업전용 장바구니

픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.

#SSR#CSR#MSA
4400