Velopers
모든 블로그
뱅크샐러드

뱅크샐러드

도메인blog.banksalad.com
주요 카테고리 프론트엔드 · DevOps

활동 요약

대표 인기 포스트React랑 Lottie로 게임을 만든다고요?152 조회
최근 30일
8개
평균 조회
14
누적 조회
1,365
전체 글
99개
마지막 발행
2026. 11. 9.
블로그 방문

뱅크샐러드 기술 블로그 글 (34)

프론트엔드

사용자를 위한 아이콘이란 무엇일까? - 뱅샐 아이콘 개편기 3편

아이콘의 직관성을 디자인 리뷰로 보완하고, AI·MCP로 피그마 검색 메타데이터를 자동화했습니다. 일괄 배포 후 모니터링과 핫픽스로 700여 개 아이콘 전환 리스크를 관리했습니다.

#Figma#MCP#자동화
100

프론트엔드

700여개의 아이콘을 하나로 묶는 법 - 뱅샐 아이콘 개편기 2편

700여 개 아이콘을 일관되게 관리하기 위한 컬러 팔레트와 13가지 조형 규칙을 정립했습니다. 정수 좌표, 선 두께, 명도 기준으로 화면 가독성과 구현 완성도를 높였습니다.

#디자인 시스템#아이콘#UI/UX
900

프론트엔드

사용자를 위한 아이콘이란 무엇일까? - 뱅샐 아이콘 개편기 3편

700여 개 아이콘의 직관성을 리뷰하고, AI·MCP로 피그마 검색 메타데이터를 자동화했습니다. 일괄 배포 뒤 모니터링과 핫픽스로 아이콘 시스템 전환 리스크를 관리했습니다.

#디자인 시스템#UI/UX#Figma
800

프론트엔드

선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편

모바일 UI에서 외곽선 아이콘이 만드는 노이즈와 규칙 불일치를 분석했습니다. 실제 화면 A/B 테스트를 바탕으로 700여 개 아이콘을 면 중심으로 개편했습니다.

#UI/UX#아이콘#브랜드디자인
1100

프론트엔드

React랑 Lottie로 게임을 만든다고요?

React·DOM·Lottie로 웹뷰 게임의 캐릭터 조합과 인터랙션을 구현한 사례를 공유했습니다. iOS 렌더링 이슈와 모바일 애니메이션 성능을 최적화한 방법을 설명합니다.

#React#Lottie#webview
000

프론트엔드

React랑 Lottie로 게임을 만든다고요?

React와 Lottie만으로 웹뷰 게임을 구현한 사례를 공유했습니다. iOS 깜빡임, 리플로우, 배터리 소모를 줄인 최적화 방법도 함께 정리했습니다.

#React#Lottie#iOS
15200

프론트엔드

접근성을 지원한다는 착각

접근성 속성을 텍스트 기반 UI 인터페이스로 보고, 보조 기술과 테스트에 함께 활용하는 관점을 설명합니다. ARIA 정보와 접근성 트리로 UI 요구사항을 직접 검증하는 방식을 제안합니다.

#접근성#ARIA#test
000

프론트엔드

접근성을 지원한다는 착각

접근성을 별도 비용이 드는 작업이 아니라 텍스트 기반 인터페이스 설계로 바라보는 관점을 설명했습니다. 스크린리더와 테스트코드에서 같은 구조를 활용하는 예시도 함께 제시했습니다.

#접근성#test#iOS
10600

프론트엔드

이걸 진짜 만든다고요? 세상에 없던 게임, 샐러드게임 | 2편. UX

샐러드게임의 복잡한 온보딩을 게임 튜토리얼과 퀘스트 경험으로 재설계했습니다. 협동 미션, 넛지, 채팅으로 팀 기반 지출 관리의 참여 경험을 강화했습니다.

#UI/UX#게이미피케이션#마이데이터
000

프론트엔드

이걸 진짜 만든다고요? 세상에 없던 게임, 샐러드게임 | 2편. UX

샐러드게임의 UX를 어떻게 설계했는지 소개했습니다. 새로운 게임 콘셉트에 맞는 사용자 경험 구성과 흐름을 다뤘습니다.

#UI/UX
2000

프론트엔드

뱅크샐러드의 새로운 집(Home) 짓기 - 2편 | 완공편

홈 탭을 위해 iOS·Android 구현 기술을 PoC로 검증하고 서버 드리븐 UI를 설계했습니다. 단계적 QA와 114일간의 실험으로 지표를 관찰하며 안정적으로 배포했습니다.

#iOS#Android#POC
000

프론트엔드

뱅크샐러드의 새로운 집(Home) 짓기 - 1편 | 기초공사

마이데이터 환경과 기능 발견성 문제를 해결하기 위해 홈 탭을 설계했습니다. CUJ와 반복 리서치로 사용자 흐름을 검증하고 운영 가능한 진입점을 만들었습니다.

#UI/UX#마이데이터#CUJ
100

프론트엔드

안전제일! 뱅크샐러드가 모바일 앱을 안정적으로 배포하는 방법

모바일 앱의 되돌릴 수 없는 배포 특성에 맞춘 주간 QA·심사·점진 배포 절차를 소개했습니다. 브랜치 전략과 자동화 테스트, 모니터링으로 배포 리스크를 낮춘 방식을 설명합니다.

#iOS#Android#GitHub Actions
000

프론트엔드

안전제일! 뱅크샐러드가 모바일 앱을 안정적으로 배포하는 방법

모바일 앱을 안정적으로 배포하기 위한 운영 방법을 소개한 글입니다. iOS 배포 사례를 바탕으로 안전성을 우선하는 전략을 다뤘습니다.

#mobile#iOS#배포
2600

프론트엔드

모듈 구조를 개선해 더 나은 뱅크샐러드 iOS 앱 개발하기

비대해진 Shared 모듈을 기능별로 분리해 iOS 프로젝트의 불필요한 의존성을 줄였습니다. DataInterface를 도입해 Domain과 Data가 추상화에 의존하도록 구조를 개선했습니다.

#iOS#module#클린 아키텍처
000

프론트엔드

모듈 구조를 개선해 더 나은 뱅크샐러드 iOS 앱 개발하기

뱅크샐러드 iOS 앱의 모듈 구조를 개선한 내용을 다룹니다. 개발 생산성과 유지보수성을 높이기 위한 방향을 소개합니다.

#iOS#module
4300

프론트엔드

Web을 위한 gRPC Stub과 Runtime 생성하기 - Feat. Buf & kubernetes

Buf 플러그인으로 gRPC-Gateway용 타입 안전 HTTP 클라이언트를 자동 생성했습니다. SSR에는 Kubernetes 내부 DNS를 적용해 응답 시간과 IPS 부하를 줄였습니다.

#gRPC#Buf#Kubernetes
000

프론트엔드

Web을 위한 gRPC Stub과 Runtime 생성하기 - Feat. Buf & kubernetes

웹에서 gRPC Stub과 Runtime을 생성하는 방법을 다뤘습니다. Buf와 Kubernetes를 활용한 구성 흐름을 중심으로 소개했습니다.

#gRPC#Kubernetes#web
2800