왓챠

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
내돈내산, Compose Focus
왓챠의 안드로이드 개발자가 Android Compose를 도입하며 겪었던 UI 개발 경험을 공유하는 글입니다. 특히 Android TV 앱 개발에서 핵심적인 개념인 '포커스(Focus)' 관리에 대한 어려움과 해결 과정을 상세히 다룹니다. 기존에는 Leanback 라이브러리를 통해 직관적인 내비게이션 구현이 가능했지만, Compose 환경에서는 Leanback과 같은 통합 라이브러리가 부족하여 FocusRequester와 FocusManager 외의 포커스 관련 API를 직접 커스텀해야 했습니다. 글에서는 이러한 과정에서 발생한 상호운용성 문제와 구체적인 해결 방안을 제시하며, Compose 기반의 TV 앱 개발 시 포커스 관리에 대한 실질적인 인사이트를 제공합니다.
Android ComposeUIFocus
왓챠·2022년 8월 3일
Frontend
안드로이드 TV 플레이어, 책임과 협력으로
왓챠에서 안드로이드 TV 플레이어의 UI/UX 개편 및 프로젝트 구조 리팩토링 과정을 공유하는 글입니다. 기존 플레이어의 기능 부족 및 불편한 UI/UX 문제를 해결하고, 높은 결합도와 불확실한 역할 분담으로 유지보수 및 테스트에 어려움이 있던 프로젝트 구조를 개선하는 데 초점을 맞춥니다. 객체지향 프로그래밍의 핵심 가치인 역할과 책임 분담을 통해 각 객체의 역할을 명확히 정의하고, 이를 바탕으로 컨트롤러 UI, 썸네일 리스트, 로딩 화면 등 다양한 위젯들의 상태값과 비즈니스 로직을 효율적으로 관리하기 위한 ViewModel 및 LiveData 활용 방안을 모색합니다.
Android TVUI/UX리팩토링
왓챠·2022년 7월 27일
Frontend
코드 다이어트, Android Compose!
본문 내용이 제공되지 않아 정확한 요약을 생성할 수 없습니다. 다만, 제목 '코드 다이어트, Android Compose!'를 바탕으로 추측해보면, 이 글은 Android 앱 개발에서 Jetpack Compose를 활용하여 코드의 효율성을 높이고 가독성을 개선하는 방법에 대해 다룰 것으로 예상됩니다. Jetpack Compose는 선언형 UI 프레임워크로, 기존의 XML 기반 UI 개발 방식에 비해 코드량을 줄이고 개발 생산성을 향상시키는 장점이 있습니다. 따라서 이 글에서는 Compose의 주요 기능과 장점을 소개하고, 실제 코드 예시를 통해 어떻게 '코드 다이어트'를 실현할 수 있는지 구체적인 방법을 제시할 가능성이 높습니다. 이를 통해 Android 개발자들이 더 간결하고 유지보수하기 쉬운 코드를 작성하도록 돕는 것을 목표로 할 것입니다.
Android ComposeUI 개발코드 다이어트
왓챠·2022년 4월 20일
Frontend
iOS 위젯 개발기
왓챠 iOS 개발자가 iOS 위젯 개발 경험을 공유하는 글입니다. WWDC 2020에서 소개된 iOS 위젯 기능에 영감을 받아, 왓챠 앱의 '이어보기' 탭 컨텐츠를 노출하는 위젯을 구상했습니다. 위젯 개발은 SwiftUI로만 가능했기에, 왓챠의 '짬데이'를 활용하여 SwiftUI 학습 및 프로토타입 개발을 진행했습니다. 이 과정에서 겪은 개발 팁과 함께, 위젯 개발이 왓챠의 개발 문화를 잘 보여줄 수 있다고 설명합니다. 유저 유입 증대 및 편의성 향상을 목표로 위젯 개발을 제안하는 내용을 담고 있습니다.
iOSWidgetSwiftUI
왓챠·2022년 2월 24일
Frontend
구글 옵티마이즈 사용해 클라이언트 독립적 A/B테스트 구성하기
본 글은 왓챠의 웹 개발자가 작성한 A/B 테스팅에 대한 글로, 마케터와 기획자도 관심을 가질 만한 주제를 다룹니다. A/B 테스트는 제품 개발 과정에서 가설을 검증하고 더 나은 의사결정을 돕는 중요한 방법론입니다. 글에서는 서비스 홍보와 판매라는 두 가지 목표에 따른 구체적인 가설 설계 예시를 제시하며, 사용자 경험(UX) 개선을 위한 다양한 아이디어 도출 및 검증의 중요성을 강조합니다. 특히, Google Optimize를 활용하여 클라이언트 독립적인 A/B 테스트 환경을 간편하게 구축하고 빠르게 가설을 검증하는 방법에 초점을 맞춥니다.
A/B 테스트Google Optimize클라이언트 독립
왓챠·2021년 10월 20일
Frontend
웹브라우저에서 동작하는 녹화앱 만들기
이 글은 웹 브라우저에서 직접 동작하는 녹화 애플리케이션을 만드는 방법을 소개합니다. 왓챠 FE팀의 개발자가 작성했으며, 최신 웹 브라우저에서 제공하는 오디오 및 비디오 녹화 기능을 활용하는 방법에 대해 다룹니다. 특히 MediaRecorder API와 같은 브라우저 API를 사용하여 사용자의 미디어를 캡처하고 녹음하는 과정을 설명하며, 이를 통해 웹 기반의 녹화 기능을 구현하는 기술적인 접근 방식을 보여줍니다. 간단한 예제를 통해 실제 구현 과정을 이해하기 쉽게 설명하여 프론트엔드 개발자들이 웹에서 멀티미디어 기능을 구현하는 데 도움을 줄 수 있는 내용을 담고 있습니다.
WebRTCMediaRecorder APIJavaScript
왓챠·2021년 8월 13일
Frontend
브라우저에서 미디어 권한을 다루는 간단 tip
왓챠의 웹 프론트엔드 개발자가 브라우저에서 미디어 권한을 다루는 팁을 공유합니다. 웹사이트 이용 시 브라우저가 마이크, 카메라 등의 미디어 접근 권한을 요청하는 상황은 흔하며, 사용자는 이를 허용하거나 차단할 수 있습니다. 또한, 브라우저 설정에서 언제든지 권한을 변경할 수 있습니다. 이 글은 이러한 브라우저의 권한 요청에 대해 서비스 개발자가 사용자의 결정에 따라 적절하게 대응하는 방법을 다룹니다. 특히, 사용자가 권한을 허용했을 때와 차단했을 때 각각 어떻게 처리해야 하는지에 대한 구체적인 구현 팁을 제공하여, 사용자 경험을 개선하고 안정적인 서비스 운영을 돕는 것을 목표로 합니다.
브라우저미디어 권한웹 프론트엔드
왓챠·2021년 7월 28일
Frontend
리액트18 버전에 추가되는 기능
이 글은 React 18 버전에 새롭게 추가되는 주요 기능들을 소개합니다. 특히, Concurrent Mode의 도입으로 애플리케이션의 응답성과 사용자 경험을 크게 향상시킬 수 있음을 강조합니다. Concurrent Mode는 렌더링을 중단하고 재개할 수 있게 하여, 무거운 렌더링 작업 중에도 UI가 멈추지 않도록 합니다. 또한, Suspense 기능이 서버 사이드 렌더링(SSR)에서도 지원되어 코드 분할 및 데이터 로딩 시 로딩 상태를 효율적으로 관리할 수 있게 됩니다. Server Components의 등장 또한 주목할 만한 변화로, 서버에서만 렌더링되는 컴포넌트를 통해 번들 크기를 줄이고 초기 로딩 성능을 개선하는 데 기여합니다. React 18은 이러한 기능들을 통해 더욱 빠르고 유연한 사용자 인터페이스 구축을 가능하게 할 것으로 기대됩니다.
ReactReact 18Concurrent Mode
왓챠·2021년 7월 7일
Frontend
Wasm 간단 사용기
이 글은 WebAssembly(wasm)의 간단한 사용 경험을 공유합니다. wasm은 2015년에 탄생하여 2017년부터 주요 브라우저에서 지원되기 시작했으며, 특히 빠른 성능으로 인해 프론트엔드 개발자들에게 큰 관심을 받고 있습니다. wasm은 C, C++, Rust 등 다양한 언어로 작성된 코드를 웹에서 빠르게 실행할 수 있도록 돕는 도구 역할을 합니다. wasm이 빠른 이유는 바이너리 파일 형식으로 코드 크기가 작아 로딩 시간이 적고, 이미 기계어에 가깝게 컴파일되어 JavaScript의 파싱, 컴파일, 최적화 과정을 거의 거치지 않고 바로 실행되기 때문입니다. 필자는 Rust를 배워 wasm으로 컴파일하고 웹 브라우저에서 구동시킨 경험을 바탕으로 wasm의 개념과 성능 이점을 설명하며, 독자들에게 더 깊이 있는 학습을 권장합니다.
WebAssemblyWasmRust
왓챠·2021년 6월 23일
Frontend
왓챠의 같이보기 서비스 웹 개발기
왓챠의 웹 프론트엔드 개발자가 ‘왓챠파티’라는 같이보기 서비스의 MVP 개발 및 제품 내재화 과정을 공유하는 글입니다. ‘친구와 함께 영상을 보면 더 즐겁게 왓챠를 이용할 수 있지 않을까’라는 가설을 검증하기 위해, 최소한의 기능으로 구현한 크롬 익스텐션 앱을 런칭하여 3개월 만에 7배 이상의 이용자를 확보하는 성과를 거두었습니다. 이후 왓챠 웹앱과 TV앱 내 베타 버전을 구현하며 지속적인 검증과 개선을 진행하고 있습니다. 개발 과정에서는 플레이어 싱크, 실시간 채팅, 파티 생성 및 초대 플로우를 핵심 기능으로 삼았으며, 제품 외부에서 로직을 구성하여 빠르게 기능을 구현하고 테스트하는 방식을 채택했습니다.
ReactVueSvelte
왓챠·2021년 3월 26일
Frontend
무슨 일 하고 계세요? #웹팀 이야기
왓챠 웹팀은 OTT 서비스 '왓챠'와 콘텐츠 추천/평가 서비스 '왓챠피디아'의 웹 브라우저 접근 영역 전반을 담당합니다. 팀은 업무 목적에 따라 스쿼드로 나뉘어 협업하며, 최근 1년간 UI 개선, 일본 시장 진출을 위한 국제화, '왓챠 파티' 기능 출시 등 다양한 변화를 이끌었습니다. 웹팀은 사용자 감상 경험 개선에 집중하며, 브라우징 스쿼드는 스마트TV와 웹 전반의 경험을, 왓챠피디아 스쿼드는 웹 개발을 중심으로 업무를 수행합니다. 이 글은 웹팀의 업무 문화와 함께 일하고 싶은 동료에 대한 이야기를 담고 있습니다.
웹팀UI 개선국제화
왓챠·2021년 2월 26일
Frontend
WATCHA 개발 지식 — px | em | rem
이 글은 프론트엔드 개발자에게 필수적인 CSS 단위인 px, em, rem에 대해 설명합니다. 각 단위의 특징과 사용법을 비교하며, 특히 반응형 웹 디자인에서 요소 크기 조절 시 유용성을 강조합니다. px는 고정된 픽셀 값을, em은 부모 요소의 폰트 크기에 비례하는 값을, rem은 루트 요소(html)의 폰트 크기에 비례하는 값을 사용합니다. 이러한 단위들을 적절히 활용하면 다양한 화면 크기에서도 일관되고 유연한 레이아웃을 구현할 수 있습니다. 웹 성능과 접근성 측면에서도 단위 선택의 중요성을 시사합니다.
pxemrem
왓챠·2020년 10월 16일
Frontend
깊은 복사와 얕은 복사에 대한 심도있는 이야기
이 글은 자바스크립트 개발자에게 필수적인 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 개념을 심도 있게 다룹니다. 얕은 복사는 참조 타입의 경우 원본 객체의 참조만 복사하여 원본과 복사본이 같은 메모리 주소를 공유하게 되는 반면, 깊은 복사는 원본 객체와 완전히 독립적인 새로운 객체를 생성하여 메모리 주소까지 복사하는 방식입니다. 글에서는 각 복사 방식의 동작 원리를 설명하고, 자바스크립트에서 객체를 복사할 때 발생할 수 있는 문제점과 이를 해결하기 위한 다양한 방법들을 소개합니다. 특히, JSON.parse(JSON.stringify(obj))와 같은 일반적인 깊은 복사 방법의 한계점을 지적하며, 라이브러리를 활용하거나 재귀 함수를 이용한 보다 견고한 깊은 복사 구현 방법을 제시합니다. 이를 통해 개발자는 데이터 불변성을 유지하고 예상치 못한 부작용을 방지하는 데 도움을 받을 수 있습니다.
JavaScript깊은 복사얕은 복사
왓챠·2020년 7월 24일
Frontend
WATCHA WEB 개발자들은 국제화를 어떻게하고 있을까
WATCHA 웹 개발팀은 국제화(i18n)를 위해 `i18next` 라이브러리를 사용하고 있습니다. 이 글은 `i18next`를 활용하여 다국어 지원을 구현하는 과정을 공유합니다. 주요 내용은 다음과 같습니다. 1. `i18next` 설치 및 기본 설정: `i18next`와 `react-i18next`를 설치하고, 언어 파일(JSON)을 로드하는 기본적인 설정을 다룹니다. 2. 네임스페이스 활용: 번역 리소스를 기능별로 분리하여 관리하는 네임스페이스의 중요성과 사용법을 설명합니다. 3. 동적 번역: 컴포넌트 외부에서 동적으로 번역 키를 생성하여 사용하는 방법을 제시합니다. 4. `Trans` 컴포넌트 활용: HTML 태그를 포함하는 번역을 처리하기 위해 `Trans` 컴포넌트를 사용하는 예시를 보여줍니다. 5. `useTranslation` 훅: 컴포넌트 내에서 번역 함수(`t`)와 네임스페이스 정보를 쉽게 가져오는 `useTranslation` 훅의 활용법을 설명합니다. WATCHA는 이러한 방식을 통해 효율적으로 다국어 서비스를 제공하고 있습니다.
국제화i18nFrontend
왓챠·2020년 6월 15일