Velopers
모든 블로그
채널톡

채널톡

도메인tech.channel.io
주요 카테고리 AI · 백엔드

활동 요약

대표 인기 포스트Grafana Mimir에 Kafka를 도입하기 전 미리 알았다면213 조회
최근 30일
12개
평균 조회
32
누적 조회
4,647
전체 글
147개
마지막 발행
2026. 11. 13.
블로그 방문

채널톡 기술 블로그 글 (23)

프론트엔드

아이폰 듀오, 일주일만에 대응 완료한 이야기

아이폰 듀오의 Safe Area와 세로 컨트롤 변화에 맞춰 iOS 앱 레이아웃을 일주일간 개선했습니다. AI 기반 화면 분석과 실기기 검증으로 약 300개 화면의 대응 범위를 점검했습니다.

#iOS#UI/UX#safe area
400

프론트엔드

라이브러리만 붙이면 동시편집은 끝일까요?

ProseMirror와 Yjs를 연결한 동시편집의 변경 전파·반영 흐름을 설명했습니다. 중복 의존성으로 인한 런타임 오류를 peer dependency와 external로 해결했습니다.

#ProseMirror#Yjs#동시편집
1400

프론트엔드

엔지니어 1명이 레포 170여 개를 pnpm 11로

pnpm 11의 install script 차단 기능으로 171개 JS·TS 레포를 전환했습니다. AI 작업에는 단계별 회귀 검증 하네스를 붙여 결과를 직접 확인했습니다.

#pnpm#npm#yarn
3900

프론트엔드

Module Federation: singleton이면 당연히 하나겠죠?

Module Federation에서 singleton만으로 해결되지 않는 React·Context 중복 원인을 분석했습니다. 런타임, import 경로, pnpm 설치 사본까지 점검 기준을 제시합니다.

#module federation#React#webpack
3200

프론트엔드

AI로 만들고, 디자인으로 완성한 3개월

AI로 분석 툴 노트북을 빠르게 검증하고, 디자인으로 밀도와 사용성을 완성한 3개월의 과정을 정리했습니다. 고객이 실제로 쓸 수 있는 제품이 되기까지의 판단과 협업 방식을 소개합니다.

#디자인 시스템#프로토타입#대시보드
4200

프론트엔드

AI가 읽는 디자인 시스템: 추상화를 다시 설계한 이유

AI가 디자인 시스템을 사용할 때는 규칙을 설명하는 것보다 잘못된 상태를 만들 수 없게 하는 추상화가 중요하다고 다뤘습니다. 목적별 컴포넌트 분리와 타입 계약으로 접근성과 상호작용을 시스템이 직접 소유하는 방법을 소개했습니다.

#디자인 시스템#TypeScript#접근성
9200

프론트엔드

RxJS로 우아하게 사이드 이펙트 통제하기

RxJS와 zustand로 비동기 사이드 이펙트를 하나의 흐름으로 통제한 개편 사례를 소개했습니다. 액션 완료 기준과 구독 해제를 명확히 해 타이밍 버그와 성능 저하를 해결했습니다.

#RxJS#비동기#zustand
7600

프론트엔드

로컬 DB를 화면의 기준으로 삼는다는 것: hearth를 직접 만든 이유

로컬 DB를 화면의 기준으로 삼는 오프라인 퍼스트 구조와 사내 라이브러리 hearth의 설계 과정을 소개했습니다. 자체 서버와 재사용 조건에 맞춰 LWW, 낙관적 쓰기 보호, 동기화 재설계를 적용했고 다음 단계로 delta sync를 준비했습니다.

#offline-first#IndexedDB#Dexie
19500

프론트엔드

느려터진 에디터 좀 고쳐줘를 AI에게 시켜봤다

AI가 위지윅 에디터 성능 개선을 반복 실험하도록 Auto Research 루프를 구성했습니다. 실제 체감 성능을 반영하는 벤치마크와 점수표 설계가 핵심이라는 점을 확인했습니다.

#LLM#성능#React
700

프론트엔드

느려터진 에디터 좀 고쳐줘를 AI에게 시켜봤다

AI에게 에디터 성능 개선을 맡겨 Auto Research 루프를 실험했습니다. 평가 지표 설계가 핵심이었고, 실제 체감 성능에 맞는 벤치마크가 중요하다고 정리했습니다.

#LLM#성능#React
7600

프론트엔드

AI를 활용한 Web 성능개선 실전 사례

AI와 Chrome DevTools flame chart를 함께 써서 Web 성능 병목을 빠르게 찾고 개선한 사례입니다. 배열 순회, Worker 통신, 소켓 이벤트를 줄여 하루 만에 체감 성능을 높였습니다.

#Web#성능#React
1700

프론트엔드

AI를 활용한 Web 성능개선 실전 사례

Chrome DevTools flame chart와 AI를 결합해 Web 앱의 병목을 빠르게 찾고 개선한 사례를 소개했습니다. O(n²) 구조, Worker round-trip, 소켓 이벤트 폭탄을 줄여 성능을 개선했습니다.

#web#성능#React
5500

프론트엔드

제품 개발 이후, 그 바깥의 AI - 버그 잡는 디자이너

디자이너가 AI 코딩 도구를 활용해 사소한 UI 버그를 직접 수정한 실전기를 소개했습니다. 티켓 정리, Plan 모드, PR 리뷰 흐름으로 백로그를 줄인 사례입니다.

#Cursor#GitHub#Linear
2700

프론트엔드

Semantic Search 만으로는 번역 품질이 해결되지 않았던 이유

Semantic Search로는 번역 키의 용어 일관성을 충분히 살리기 어려웠습니다. 문장 유사도보다 정확한 용어 재사용에 맞춰 검색 방식을 바꾸는 것이 더 효과적이었습니다.

#검색#LLM#RAG
1000

프론트엔드

Notion DB를 활용한 Figma 플러그인 만들기

Notion DB와 Figma 플러그인을 연결해 더미 데이터 입력을 자동화한 사례를 소개했습니다. CORS 문제와 AI 데이터 생성 이슈를 해결하며 팀용 도구로 확장한 과정도 담았습니다.

#Figma#Notion#Supabase
1200

프론트엔드

채널콘 2025 디자인 비하인드

채널콘 2025의 디자인 비하인드와 브랜드 경험 설계 과정을 소개했습니다. AI 활용, 행사 동선, 시각 아이덴티티를 일관되게 묶어 좋은 경험을 쌓는 방법을 다뤘습니다.

#UI/UX#브랜딩#LLM
500

프론트엔드

채널톡 iOS26 대응기

iOS26의 Safari 주소창 변경으로 채널톡 메신저 하단에 사이트가 노출되는 문제를 대응했습니다. CSS 한계와 스크롤 이슈를 거쳐 동적 커버 방식으로 채팅 경험을 개선했습니다.

#iOS#iPhone#Safari
1000

프론트엔드

채널톡 iOS26 대응기

iOS26에서 Safari 주소창 변경으로 채널톡 메신저 하단에 빈 공간이 보이는 문제를 대응했습니다. CSS 우회와 커버 오버레이 방식을 거쳐 채팅 경험을 해치지 않는 방향으로 적용했습니다.

#iOS#iOS 26#Safari
2200