클래스101

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
해당 글은 'Vibrant Design System'을 활용한 크로스 플랫폼 개발 경험을 공유합니다. 다만, 제공된 본문 내용이 오류 메시지로 인해 비어 있어 구체적인 기술적 내용이나 개발 과정, 얻은 인사이트를 파악하기 어렵습니다. 일반적으로 디자인 시스템은 UI 일관성을 유지하고 개발 생산성을 향상시키는 데 중요한 역할을 합니다. 크로스 플랫폼 개발은 다양한 환경에서 동일한 사용자 경험을 제공하는 것을 목표로 하며, 디자인 시스템은 이러한 목표 달성에 필수적인 요소입니다. 본문이 정상적으로 제공되었다면, Vibrant Design System의 특징, 도입 과정에서의 어려움과 해결 방안, 그리고 크로스 플랫폼 환경에서의 실제 적용 사례 및 성과에 대한 상세한 내용을 담고 있을 것으로 예상됩니다. 오류 메시지로 인해 정확한 요약은 어렵지만, 디자인 시스템을 통한 효율적인 크로스 플랫폼 UI 개발에 대한 경험을 다루는 글일 것입니다.
Vibrant Design System크로스 플랫폼디자인 시스템
클래스101·2023년 3월 15일
Frontend
Vibrant Design System을 소개합니다
클래스101 플랫폼 팀의 디자이너 타일러가 Vibrant Design System(Vibrant) 개편 과정을 소개하는 시리즈의 첫 번째 아티클입니다. 과거 One Product System(OPS) 디자인 시스템을 구독 서비스 런칭에 맞춰 Vibrant로 개편하면서 얻은 인사이트와 문제 해결 과정을 공유할 예정입니다. 이 글에서는 Vibrant라는 새로운 이름으로 개편하게 된 배경과 팀이 가진 관점에 대해 이야기하며, 디자인 시스템의 다양한 모습에 대한 고민을 나누고 있습니다. 앞으로 이어질 시리즈를 통해 디자인 시스템 구축 및 운영에 대한 깊이 있는 내용을 다룰 것으로 기대됩니다.
디자인 시스템UI 컴포넌트클래스101
클래스101·2023년 1월 25일
Frontend
클래스101의 디자인 시스템, One Product System
클래스101은 기존 디자인 시스템의 한계를 극복하고 서비스 리브랜딩에 대응하기 위해 새로운 디자인 시스템인 'One Product System(OPS)'을 도입했습니다. 디자인 시스템은 컴포넌트의 사용을 제약하여 통일성과 생산성을 높이는 것을 목표로 합니다. 특히, 컴포넌트의 다양한 변형(variation)을 효율적으로 관리하는 것이 핵심이며, 이를 위해 styled-system 라이브러리를 활용했습니다. OPS는 버튼, 텍스트 등 다양한 UI 컴포넌트의 크기, 스타일 등을 미리 정의된 규칙 안에서만 사용하도록 하여 개발 생산성을 향상시키는 데 중점을 두고 있습니다.
디자인 시스템One Product SystemClass101
클래스101·2021년 7월 12일
Frontend
기술부채가 쌓여있는 상황에서 서비스 성능 임팩트 있게 개선하기
클래스101은 2018년 런칭 이후 쌓인 기술 부채로 인한 성능 저하 문제를 해결하기 위해 프로젝트를 시작했습니다. 특히 광고 이탈율 개선과 레거시 코드 청산을 목표로 삼았습니다. 문제 해결을 위해 지표에 집중하기로 결정했으며, 사용자 경험 개선을 위한 필수 지표인 Core Web Vitals를 핵심 지표로 선정했습니다. Lighthouse Score보다 지표가 적고 UX에서 연역적으로 도출되었으며 DataDog에서 측정이 가능하다는 장점 때문에 Core Web Vitals를 선택하게 되었습니다. 이를 통해 서비스 성능을 임팩트 있게 개선하는 과정을 다룹니다.
기술부채서비스 성능Core Web Vitals
클래스101·2021년 7월 5일
Frontend
엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐
이 글은 엔터프라이즈 프론트엔드 애플리케이션의 복잡성 증가 문제를 해결하기 위한 마이크로 프론트엔드 아키텍쳐 도입 경험을 공유합니다. 소프트웨어의 수명과 복잡도는 비례하며, 코드베이스가 커질수록 이해와 수정이 어려워집니다. 클래스101은 사업 조직을 기능 단위가 아닌 문제 해결 중심의 팀으로 분리하고, 각 팀이 담당 도메인에 대한 작은 코드베이스를 갖도록 하여 개발 생산성을 높였습니다. 마이크로 프론트엔드는 팀별 독립적인 개발, 배포, 롤백을 가능하게 하여 다른 팀의 작업에 영향을 주지 않고 빠른 주기로 기능을 개선할 수 있도록 지원합니다.
마이크로 프론트엔드엔터프라이즈아키텍쳐
클래스101·2021년 6월 17일
Frontend
styled-components와 함께하는 오픈 소스 디버깅
이 글은 styled-components를 사용하여 서버 사이드 렌더링(SSR) 환경에서 발생할 수 있는 CSS 클래스 순서 오류 문제를 다룹니다. 클래스101의 웹 애플리케이션에 SSR을 적용하는 과정에서 styled-components로 만든 컴포넌트들이 서버 사이드에서 렌더링될 때 스타일이 깨지는 현상이 발생했습니다. 글에서는 이러한 문제를 직접 해결하기 위해 styled-components의 GitHub 저장소에 보고된 이슈들을 분석하고, 오류 재현 코드를 통해 문제점을 명확히 합니다. 궁극적으로 오픈 소스 라이브러리의 내부 동작을 이해하고 직접 디버깅하여 문제를 해결하는 과정을 공유하며, 프론트엔드 개발자가 복잡한 기술적 난관에 봉착했을 때 취할 수 있는 접근 방식을 제시합니다.
styled-componentsSSR오픈소스
클래스101·2021년 6월 16일
Frontend
styled-components와 함께하는 오픈 소스 디버깅
이 글은 styled-components를 사용하여 오픈 소스 프로젝트의 디버깅 과정을 다룹니다. 특히, Okta를 이용한 로그인 기능 구현 시 발생할 수 있는 문제들을 styled-components의 활용을 통해 어떻게 해결해 나가는지에 초점을 맞춥니다. 이미지 삽입 및 로그인 관련 UI 컴포넌트 개발 과정에서 디버깅 팁과 함께 styled-components의 유용성을 보여줍니다. 프론트엔드 개발자가 UI 컴포넌트 개발 및 디버깅 시 참고할 만한 내용을 담고 있습니다.
styled-components오픈소스디버깅
클래스101·2020년 10월 24일
Frontend
Cypress 테스트 환경 구축하기
이 글은 Cypress를 사용하여 프론트엔드 애플리케이션의 테스트 환경을 구축하는 방법을 다룹니다. Cypress는 웹 애플리케이션의 End-to-End(E2E) 테스트를 위한 강력한 도구로, 개발자가 UI 동작을 쉽게 자동화하고 검증할 수 있도록 지원합니다. 글에서는 Cypress 설치부터 기본적인 테스트 코드 작성, 그리고 실제 애플리케이션에 적용하는 과정까지 상세하게 설명할 것으로 예상됩니다. 특히, Okta를 이용한 Sign In 기능 테스트를 예시로 들어, 복잡한 인증 흐름을 포함한 테스트 환경 설정의 중요성을 강조합니다. 이를 통해 개발 생산성을 높이고 애플리케이션의 안정성을 확보하는 데 기여할 것입니다.
Cypress테스트Frontend
클래스101·2020년 6월 24일