원티드

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
웹과 다른 세계: 이메일 템플릿 작업에서 겪은 시행착오
본 글은 웹 개발 환경과 달리 제약이 많은 이메일 템플릿 작업에서 겪었던 시행착오와 해결 과정을 공유합니다. 이메일 클라이언트별 렌더링 차이, CSS 지원 범위의 한계, HTML 구조의 제약 등 웹 개발과는 다른 이메일 템플릿만의 독특한 문제점들을 다룹니다. 특히, 반응형 디자인 구현의 어려움과 이를 극복하기 위한 테이블 레이아웃 활용, 인라인 스타일 사용, CSS 속성 제한 등 실질적인 해결 방안을 제시합니다. 웹 표준을 준수하면서도 다양한 이메일 클라이언트에서 일관된 화면을 보여주기 위한 저자의 노력을 엿볼 수 있으며, 이메일 템플릿 개발 시 발생할 수 있는 문제에 대한 인사이트를 얻을 수 있습니다.
이메일 템플릿HTMLCSS
원티드·2026년 1월 2일
Frontend
HEIC 파일 포맷 지원을 통한 사용자 경험 향상 시키기
이 글은 HEIC/HEIF 파일 포맷의 특징과 이를 지원하지 않는 서비스에서 발생하는 문제 상황을 다룹니다. HEIC는 Apple 기기에서 주로 사용되는 고효율 이미지 컨테이너 포맷으로, 기존 JPEG보다 높은 압축률과 다양한 메타데이터를 지원합니다. 그러나 일부 웹 서비스에서는 HEIC 파일을 JPEG나 PNG로 인식하지 못해 업로드 오류가 발생하는 문제가 있습니다. 글에서는 이러한 문제 상황을 원티드 소셜 서비스의 사례를 통해 설명하며, HEIC 파일 포맷 지원의 필요성을 강조합니다. 향후 HEIC 포맷 지원을 통해 사용자 경험을 개선할 수 있는 방안을 모색합니다.
HEICHEIF파일 포맷
원티드·2024년 4월 1일
Frontend
Yarn Classic에서 Pnpm으로 전환하기 with TurboRepo
원티드랩 HR솔루션사업팀에서 프론트엔드 개발자가 Yarn Classic에서 Pnpm으로 패키지 매니저를 전환한 경험을 공유하는 글입니다. Yarn Classic은 성능이 느리고 호이스팅으로 인해 유령 의존성 문제를 야기할 수 있으며, 특히 모노레포 환경에서는 이 문제가 더욱 심각해질 수 있습니다. 글에서는 유령 의존성의 개념을 설명하고, 이러한 문제를 해결하기 위해 Pnpm으로 전환하게 된 배경과 과정을 상세히 다룹니다. Pnpm은 디스크 공간을 효율적으로 사용하고 유령 의존성 문제를 방지하는 데 효과적인 대안으로 제시됩니다.
Yarn ClassicPnpmTurboRepo
원티드·2024년 2월 7일
Frontend
크레딧잡 새로운 상태관리를 위한 여정 (feat. Zustand)
크레딧잡 프론트엔드팀은 3년 이상 관리되지 않은 레거시 코드의 기술 부채 문제를 해결하기 위해 새로운 상태 관리 라이브러리 도입을 결정했습니다. 기존 Redux와 Saga 조합은 코드 복잡성, 낮은 가독성, 높은 사이드이펙트 발생 확률, 그리고 로컬 상태 관리에도 Redux를 사용하는 비효율성을 야기하고 있었습니다. 이에 팀은 러닝 커브가 낮고 기존 구조와의 호환성을 고려하여 Zustand 도입을 검토하게 되었습니다. 향후 개발될 기능에는 Zustand를 우선 적용하고, 안정성이 검증되면 기존 Redux 구조도 점진적으로 마이그레이션할 계획입니다. 이 글은 이러한 상태 관리 라이브러리 선택 과정과 그 배경을 공유합니다.
상태 관리ZustandRedux
원티드·2022년 10월 25일
Frontend
Alert, Confirm UI를 편하게 다루기 위한 고민과 해결법
이 글은 원티드랩 프론트엔드팀이 Alert 및 Confirm UI를 더 쉽게 다루기 위해 고민하고 해결한 과정을 공유합니다. 개발 생산성을 높이기 위해 자주 사용되는 기능을 추상화하고 재사용 가능하게 만드는 것이 중요하지만, 사용하기 어려운 인터페이스는 결국 외면받게 됩니다. 사용하기 쉬운 인터페이스는 직관적이고 기능 확장에 열려 있어야 하며, 이는 자바스크립트 기본 API와 유사한 인터페이스를 제공함으로써 달성할 수 있습니다. 이를 통해 개발자는 코드 내부를 보지 않고도 인터페이스의 동작을 예측할 수 있으며, 재활용성과 확장성을 높여 개발 효율성을 향상시킬 수 있습니다.
AlertConfirmUI
원티드·2022년 8월 2일
Frontend
Fiddler로 API의 응답 데이터를 조작해 UI를 검증하기
이 글은 Fiddler라는 도구를 사용하여 API 응답 데이터를 조작함으로써 프론트엔드 UI를 검증하는 방법을 다룹니다. 개발 과정에서 실제 API 응답을 기다리지 않고도 다양한 시나리오에 대한 UI 동작을 테스트할 수 있다는 장점을 설명합니다. 특히, 특정 HTTP 응답 코드를 반환하거나 데이터 형식을 변경하여 프론트엔드에서 발생하는 예외 처리 및 다양한 UI 상태를 효과적으로 검증하는 기법을 소개합니다. 이를 통해 개발 생산성을 높이고 잠재적인 버그를 조기에 발견하는 데 도움을 줄 수 있습니다.
FiddlerAPIUI 테스트
원티드·2022년 6월 16일
Frontend
프론트엔드 개발자가 지구 온난화를 막는 방법. (feat. 이미지 최적화)
이 글은 프론트엔드 개발자가 지구 온난화 문제 해결에 기여할 수 있는 방법을 제시하며, 특히 이미지 최적화를 통한 웹페이지 무게 감소의 중요성을 강조합니다. 전 세계 데이터 센터의 막대한 전력 소비와 탄소 배출 문제를 지적하며, 웹페이지 무게 증가가 에너지 소비 증가로 이어진다고 설명합니다. 이미지 최적화를 통해 웹페이지를 가볍게 만들면 데이터 전송 효율성을 높이고 에너지 수요를 줄일 수 있으며, 이는 사용자 경험 향상과 검색 순위 상승에도 긍정적인 영향을 미칩니다. 글에서는 실제 서비스에서 최적화되지 않은 외부 이미지가 페이지 용량을 크게 늘린 사례를 언급하며, 이미지 최적화의 필요성을 역설합니다.
이미지 최적화웹 성능Frontend
원티드·2022년 6월 3일
Frontend
ESLint 커스텀 룰 적용기
이 글은 원티드랩 개발팀에서 ESLint 커스텀 규칙을 적용한 경험을 공유합니다. ESLint는 자바스크립트 문법 오류를 표시하는 도구로, 프로젝트 규모가 커지고 협업 인원이 늘어날수록 코딩 스타일의 일관성을 유지하고 놓치기 쉬운 부분을 바로잡는 데 유용합니다. 글에서는 ESLint의 기본 동작 방식과 파서, AST(Abstract Syntax Tree)의 개념을 설명하며, 커스텀 규칙을 만들게 된 배경과 그 과정을 상세히 다룹니다. 이를 통해 개발 생산성과 코드 품질 향상에 기여하는 ESLint 커스텀 규칙의 중요성을 강조합니다.
ESLint커스텀 룰자바스크립트
원티드·2022년 2월 4일
Frontend
Mac에서 iOS Chrome 디버깅하기 (feat. Simulator)
이 글은 Mac 환경에서 iOS 기기의 Chrome 브라우저를 디버깅하는 방법을 다룹니다. 주로 Safari 개발자 도구를 활용하여 iOS 시뮬레이터에 접속된 Chrome 인스턴스를 디버깅하는 과정을 설명합니다. 글에서는 Safari의 개발자 도구에서 원격 웹 사이트 타겟팅 기능을 사용하여 iOS 시뮬레이터의 Chrome을 연결하고, 이를 통해 웹 페이지의 DOM, CSS, JavaScript 등을 실시간으로 검사하고 수정하는 방법을 안내합니다. 이를 통해 프론트엔드 개발자는 iOS 환경에서의 웹 애플리케이션 동작을 효과적으로 확인하고 문제를 해결할 수 있습니다. 특히, 실제 기기 없이도 개발 및 테스트 효율성을 높일 수 있다는 점을 강조합니다.
iOSChrome디버깅
원티드·2021년 11월 19일
Frontend
원티드 앱에 Compose 적용해보기 — 5
이 글은 원티드 앱에 Jetpack Compose를 적용하는 과정에서 발생한 두 가지 TextField 이슈에 대해 다룹니다. 첫 번째는 NestedScroll 이슈로, Column 내부에 스크롤이 있는 상태에서 여러 개의 TextField를 사용할 때 발생하는 스크롤 충돌 문제입니다. 두 번째는 InputConnection 이슈로, IME(Input Method Editor)와 Compose 간의 상호작용에서 발생하는 문제로, 특히 한글 입력 시 커서 위치 오류 등이 발생했습니다. 저자는 이러한 이슈들을 해결하기 위한 시도와 그 과정에서 겪은 어려움을 공유하며, Compose 도입 시 고려해야 할 점들을 제시합니다.
Jetpack ComposeAndroidTextField
원티드·2021년 11월 12일
Frontend
원티드 앱에 Compose 적용해보기 — 4
이 글은 원티드 앱에 Jetpack Compose를 적용하는 네 번째 이야기로, 커뮤니티 게시글 목록에 상단 고정 게시물을 가로 스크롤 형태로 추가하는 방법을 다룹니다. 기존 안드로이드 뷰 시스템에서는 여러 XML 레이아웃과 어댑터 클래스를 생성하고 관리해야 하는 복잡한 과정이 필요했지만, Compose를 사용하면 훨씬 간결하게 UI를 구성할 수 있음을 보여줍니다. 특히, `Text` 컴포넌트의 `minLines` 속성을 활용하여 텍스트가 여러 줄로 표시될 때 UI가 깨지지 않도록 하는 등 Compose의 선언적 UI 작성 방식을 통해 개발 생산성을 높이는 방법을 설명합니다.
Jetpack ComposeAndroidUI
원티드·2021년 11월 5일
Frontend
원티드 앱에 Compose 적용해보기 — 3
이 글은 원티드 앱에 Jetpack Compose를 적용하는 과정을 세 번째로 다루며, 특히 커뮤니티 글 목록 화면을 LazyColumn을 사용하여 구현하는 방법에 초점을 맞춥니다. 게시글 항목의 UI를 구성하는 과정에서 사용자 정보 영역(아바타, 이름, 시간, 좋아요/댓글 수)을 세부적으로 살펴봅니다. 이미지 로딩을 위해 Compose를 지원하는 오픈소스 라이브러리인 Landscapist를 활용하며, 원티드 앱에서 기존에 사용하던 Glide와 동일한 스펙을 맞추기 위해 GlideImage를 선택했습니다. 이를 통해 효율적이고 깔끔한 UI 구현 방법을 제시합니다.
ComposeLazyColumnGlideImage
원티드·2021년 11월 3일
Frontend
SPA를 ‘SNS공유하기’ 가능하게 해보자.
이 글은 SPA(Single Page Application)에서 발생하는 SNS 공유 문제를 해결하는 방법을 다룹니다. SPA는 봇 크롤링이 어려워 SNS 공유 시 모든 페이지에서 동일한 메타태그가 출력되는 이슈가 있습니다. 이를 해결하기 위해 두 가지 구현 방식을 제시합니다. 첫 번째는 Cloudfront와 Lambda@Edge, S3를 활용하는 방식이며, 두 번째는 Express 미들웨어를 사용하는 방식입니다. 두 방식 모두 기존 코드 구조를 크게 변경하지 않고 적용 가능하며, 필요에 따라 제거할 수 있도록 고려되었습니다. 이를 통해 SPA에서도 페이지별 고유 정보를 담은 메타태그를 출력하여 SNS 공유 기능을 정상적으로 사용할 수 있게 됩니다.
SPASNS 공유Meta Tag
원티드·2021년 10월 19일
Frontend
Next.js 무한 스크롤 이슈에 Route as Modal 접목시키기
이 글은 Next.js 환경에서 무한 스크롤 페이지에서 상세 페이지로 이동 후 뒤로가기를 했을 때 발생하는 스크롤 위치 유지 문제를 다룹니다. 사용자가 상세 페이지를 본 후 목록 페이지로 돌아왔을 때 스크롤이 맨 위로 초기화되는 현상은 사용성을 저해하고 사이트 이탈로 이어질 수 있다는 점을 Baymard Institute의 연구를 인용하여 설명합니다. 이러한 문제를 해결하기 위해 'Route as Modal' 기법을 적용하는 방안을 제시하며, 원티드 웹 서비스에 적용하게 된 배경과 이유를 공유합니다. 이 글은 프론트엔드 개발자가 겪을 수 있는 흔한 사용성 이슈와 이를 해결하기 위한 구체적인 기술적 접근 방법을 이해하는 데 도움을 줍니다.
Next.js무한 스크롤Route as Modal
원티드·2021년 10월 12일
Frontend
CloudFront + CloudFront functions 이용하여, Next.js 번들파일 효율적으로 서빙하기!
이 글은 Next.js 애플리케이션의 번들 파일(JS, CSS) 서빙 속도를 개선하기 위한 방법을 다룹니다. WebPageTest 결과, 한국에 위치한 Next.js 서버에서 미국 사용자를 대상으로 JS, CSS 서빙 시간이 오래 걸리는 문제가 발견되었습니다. 이는 지리적 Latency와 서버 부하 때문입니다. 해결책으로 CDN Support with Asset Prefix를 적용하여 번들 파일을 CDN에서 서빙하는 방안을 제시합니다. CDN은 사용자와 가까운 곳에서 콘텐츠를 전송하여 로드 시간을 단축하고 더 빠르고 안정적인 경험을 제공합니다. 특히 CloudFront와 CloudFront Functions를 활용하여 번들 파일을 효율적으로 서빙하는 구체적인 방법을 탐구합니다.
CloudFrontCloudFront FunctionNext.js
원티드·2021년 10월 7일
Frontend
원티드 앱에 Compose 적용해보기 — 2
이 글은 원티드 앱에 Jetpack Compose를 적용하는 두 번째 이야기로, 기존 XML 레이아웃에서 Composable UI를 사용하는 방법을 다룹니다. 특히 에러 발생 시 표시되는 커스텀 UI인 ErrorView를 Compose로 변환하고, 이를 XML에서 활용할 수 있도록 구현하는 과정을 상세히 설명합니다. Composable 함수를 정의하고 필요한 리소스(이미지, 문자열)를 Painter와 stringResource로 가져오는 방법을 보여주며, Modifier를 사용하여 UI 요소의 크기, 패딩, 정렬 등을 설정하는 예시를 제공합니다. 이를 통해 기존 Android 개발 환경에서 Compose를 점진적으로 도입하는 실질적인 방법을 제시하며, UI 개발의 효율성과 유연성을 높이는 방안을 모색합니다.
Jetpack ComposeAndroidUI
원티드·2021년 10월 1일
Frontend
크롬 익스텐션 개발기 (feat. Manifest V3)
본 글은 크롬 익스텐션 개발 경험을 공유합니다. 특히 Manifest V3 전환 과정에서 겪었던 어려움과 해결 과정을 상세히 다룹니다. Manifest V2에서 V3로 변경되면서 보안 및 성능 개선이 이루어졌지만, 개발자에게는 API 변경 및 새로운 제약 사항에 대한 이해가 필요했습니다. 글에서는 구체적인 코드 예시와 함께 Manifest V3의 주요 변경 사항, 특히 백그라운드 스크립트의 동작 방식 변화와 API 호출 방식의 차이점을 설명합니다. 또한, 개발 과정에서 발생했던 문제점들을 어떻게 해결했는지 단계별로 제시하며, 크롬 익스텐션 개발을 처음 시작하거나 Manifest V3로 전환하려는 개발자들에게 실질적인 도움을 줄 수 있는 정보를 제공합니다. 이를 통해 개발자는 보다 안정적이고 효율적인 크롬 익스텐션을 개발할 수 있을 것입니다.
크롬 익스텐션Manifest V3Chrome Extension
원티드·2021년 9월 29일
Frontend
원티드 앱에 Compose 적용해보기 - 1
이 글은 원티드 앱에 Jetpack Compose를 적용해본 경험을 공유하는 첫 번째 글입니다. Compose의 stable 버전 출시 이후, 개발자는 비교적 간단하고 중요도가 낮은 커뮤니티 가이드 화면을 Compose로 전환하는 작업을 진행했습니다. 이 과정에서 Android Studio Arctic Fox, Kotlin 1.5.21 이상 환경에서 Compose를 사용하기 위한 Gradle 설정 방법과 Fragment에서 ComposeView를 설정하는 기본적인 절차를 설명합니다. 공식 문서를 참고하여 ui, tooling, material 관련 dependency를 추가하는 방법을 안내하며, Compose 도입을 고려하는 개발자들에게 실질적인 도움을 주고자 합니다.
Jetpack ComposeAndroidUI
원티드·2021년 9월 13일
Frontend
의미 있는 마크업 작성하기
이 글은 웹사이트의 정보 구조를 명확하게 하기 위한 의미 있는 마크업 작성의 중요성을 강조합니다. HTML이 정보를 구조화하기 위해 만들어졌으며, 책의 목차처럼 잘 정리된 마크업은 사용자와 검색 엔진 모두에게 정보 접근성을 높인다고 설명합니다. 특히 Google과 같은 검색 엔진이 웹사이트 정보를 수집하고 검색 결과를 제공하는 방식에 비추어, 웹 표준을 준수하고 시맨틱 마크업을 작성하는 것이 콘텐츠의 가시성과 검색 결과 노출에 매우 중요함을 역설합니다. 메타 데이터 작성의 중요성도 언급하며, 잘 구조화된 마크업이 웹사이트의 성공에 기여함을 시사합니다.
HTML마크업 자동화시맨틱 마크업
원티드·2021년 9월 9일
Frontend
프로젝트 전체에 코드 포맷팅 적용하기
이 글은 원티드 프론트엔드팀에서 코드 포맷팅을 프로젝트 전체에 일괄 적용한 경험을 공유합니다. 프로젝트 히스토리가 길어지면서 최신 포맷팅 설정이 적용되지 않아 변경사항 추적이 어렵고 PR 리뷰 시간이 길어지는 문제가 발생했습니다. 이를 해결하기 위해 Prettier와 ESLint를 활용하여 코드 스타일을 통일하고 자동 포맷팅을 적용했습니다. 코드 포맷팅 적용 과정을 설명하고, 이 경험이 개발 생산성 향상과 리뷰 효율 증대에 어떻게 기여했는지 느낀 점을 공유합니다. 프로젝트에 코드 포맷팅을 적용하려는 다른 개발자들에게 유용한 정보를 제공하는 것을 목표로 합니다.
코드 포맷팅PrettierESLint
원티드·2021년 8월 30일