안녕하세요,
개발자 안승찬입니다.
TypeScript, Next.js, React Native를 중심으로 웹·앱을 개발합니다.
WebView 아키텍처와 성능 개선을 주로 다뤄왔습니다.
기술의 사용법보다 '왜 필요한가'를 먼저 이해하며, 문제 해결 중심으로 기술을 선택하는 개발자입니다.
소개
성능과 구조를 함께 봅니다.
Lighthouse·LCP 등 지표로 개선 전후를 확인합니다. SSR/ISR 분리, 리스트 가상화, 번들 최적화를 실무에 적용해 왔습니다.
케어마인더에서는 RN → WebView + Next.js 전환과 모노레포·디자인 시스템을 맡았고, 현재 골드앤컴퍼니에서 금 거래 앱 프론트엔드를 개발하고 있습니다.
기획·디자인·백엔드와 협업하며, 팀이 같은 기준으로 일할 수 있게 정리하는 편입니다.
프로젝트
GitHub에 공개된 저장소입니다. 회사 프로젝트는 경력에서 확인할 수 있습니다.
WebViewKit
WebView 앱에서 네이티브 앱과 동일한 스택 네비게이션을 제공하는 npm 라이브러리입니다.
자세히 보기 →
코모 (Como)
직장인을 위한 취미 매칭 플랫폼으로, 서울시 교육청에 실제 MVP를 도입한 서비스입니다.
자세히 보기 →
스픽독 (Speakdog)
시각장애인을 위한 PDF 리더 앱으로, TTS 음성 합성으로 문서를 들려주는 서비스입니다.
자세히 보기 →
우리 (Uri)
소아우울증 아동을 위한 AI 챗봇 앱으로, 감정 대화와 보호자 연결을 지원합니다.
자세히 보기 →더 많은 저장소 →
github.com/Ahnseungc블로그
자세한 문제 해결 과정은 Velog에서 확인할 수 있습니다.
크로스 브라우징_구형 Android WebView는 Chrome이 아니다
골디 앱 WebView · Android 12(갤럭시 노트10+)에서 하단 CTA·툴팁·칩이 가로로 어긋난 실전 디버깅 기록 들어가며 모바일 웹을 앱 WebView로 감싸서 서비스하는 팀이라면, iOS Safari와…
자세히 보기 →기본으로돌아가자_이벤트이미터
Node.js의 EventEmitter는 매우 익숙한 API지만, 실제로 내부를 직접 구현해보면 생각보다 많은 디테일이 숨어 있습니다.이번 글에서는 주어진 요구사항을 기준으로, 브라우저에서도 동작하는 경량 Event…
자세히 보기 →기본으로 돌아가자_동시실행제한큐
먼저 구조를 잡아 봅시다.생성자로는 작업을 담을 queue와 동시에 작업할 수 있는 concurrency가 먼저 생각났습니다.그 다음 요구사항 위에서 부터 구현해 보도록 하겠습니다.순환 구조를 잡는 부분 제외하고는…
자세히 보기 →기본으로 돌아가자_디바운스
요새 너무 AI 의존해 뇌와 생각이 멈춘 것 같다는 느낌을 받아, 초심으로 돌아가 기능들을 하나씩 직접 만들어 보기 위해 이 글을 시작 했습니다. 그래서 이번에 만들어 볼 건 기본적이며, 실제 구현에 많이 쓰는 검색…
자세히 보기 →
하단 네비게이션 최적화 해보기
안녕하세요.사내 B2C WebView에서 서브 4탭 하단바와 전역 5탭 하단바를 다루면서, 체감 성능·애니메이션 일관성·초기 로드 부담을 맞추는 작업을 정리했습니다.하단 네비는 두 갈래입니다.전역 5탭: 앱 전체에서…
자세히 보기 →크로스 브라우징: Chrome은 친구, Safari는…
Chrome, Safari(WebKit), 앱 WebView에서 레이아웃과 flex 계산이 조금씩 달라지는 경우를 줄이기 위한 정리입니다. 같은 코드라도 환경마다 결과가 다를 수 있다는 전제에서, 자주 걸리는 지점만…
자세히 보기 →
"왜 갑자기 CPU가 춤을 추지?"
요약 배경: 프로덕션 CPU 스파이크 완화 및 웹뷰 앱에서 느껴지던 느려짐 완화를 위해, Next.js 정적 산출물(/_next/static)을 S3 + CloudFront(CDN) 로 분리. 브랜치: hotfix/…
자세히 보기 →일렉트론 전환기
웹 클라우드 문제점 일렉트론 전환 이유 저희는 병원에 B2B 서비스를 제공하며, 초기에는 클라우드 기반 웹 애플리케이션으로 서비스를 배포하였습니다. 하지만 병원의 여러 요구사항과 사용 환경을 분석한 결과, 클라우드…
자세히 보기 →
렌더링 방식의 선택과 도입
안녕하세요. 리케어랩의 프론트엔드 개발자 안승찬입니다. 이번 글은 다름아닌 기존 CSR로만 구성 되어있던 회사 프로젝트를 ISR방식을 도입하면서 생긴 일들의 대해서 공유 하고자 글을 작성하였습니다. "그래서 ISR이…
자세히 보기 →스켈레톤 로딩 UI
안녕하세요.리케어랩 개발팀 안승찬입니다.😊이번에는 스켈레톤 로딩 UI를 도입하면서 느꼈던 부분들을 공유드릴려고 합니다.스켈레톤 로딩 UI의 경우 사용자가 콘텐츠 로딩 중에도 페이지 구조를 파악할 수 있도록 돕는…
자세히 보기 →
삼중 로그인 권한
안녕하세요.팀 케어마인더에서 활동하고 있는 안승찬입니다.오늘은 실제 병원에서 프로덕션으로 사용예정인 케어마인더 시스템에 로그인 구축을 하면서 사용한 방법에 대해 공유 드릴려고 합니다.병동 권한 (Ward Tablet…
자세히 보기 →
Gitflow에 대한 생각
안녕하세요, 리케어랩 프론트개발팀에서 웹 개발을 담당하고 있는 안승찬입니다.오늘은 저희 웹 개발 팀에서 사용하고 있는 Git 브랜치 전략에 대해 소개해드리려고 합니다. 현재의 관리 플로우가 반드시 정답이라고 생각하지…
자세히 보기 →경력
다양한 제품에서 프론트엔드 개발 경험을 쌓고 있습니다.
활동
스타트업에서 스타팅 개발자로 살아남기
정주영 창업경진대회 — 우수상 · 인기상
오픈소스 SW 웹 해커톤 — 금상
캡스톤 디자인
KBSC ESG 공모전 — 장려상
다뤄온 기술 스택
언어부터 프레임워크·상태관리·스타일·인프라까지, 제품을 만들며 실제로 사용한 도구들입니다.
언어
총 5개의 기술 스택
프레임워크
총 6개의 기술 스택
상태관리
총 5개의 기술 스택
스타일
총 3개의 기술 스택
테스트
총 4개의 기술 스택
인프라·도구
총 10개의 기술 스택
