최근 프론트엔드 개발에서 사실상의 표준으로 자리매김 하는 기술이 있습니다. 바로 SSR, Server Side Rendering인데요. Next.js를 비롯한 다양한 프레임워크에서 SSR을 손쉽게 구축할 수 있는 솔루션을 제공하고 있습니다. 토스 또한 SSR을 도입하여 많은 사용자에게…
안녕하세요, 토스뱅크 Server Developer 김경윤입니다. 은행 창구에서 본인확인을 위해 뭘 요구할까요? 바로, 신분증입니다! 비대면 은행인 토스뱅크에서도 서비스를 사용하려면 신분증이 가장 먼저 필요해요. 비대면 은행은 스마트폰으로 촬영된 신분증 이미지를 확인해서 위조 신분증인지…
여러분은 기술적인 고민을 누구와 나누시나요? 모닥불 피워두고 같이 도란도란 이야기 나누는 것처럼, 토스 프론트엔드 개발자들은 '모닥불'이라는 시간을 통해 함께 기술적인 문제를 나누고 해결방안을 찾아가고 있는데요. 최근 모닥불 중 가장 뜨거웠던 주제를 소개합니다. “코드란 비즈니스를 위한…
배경 토스 디자인 시스템에서 가장 많이 사용하는 컴포넌트는 테이블이에요. 테이블은 크게 두 가지를 고려해야 하는 복잡한 컴포넌트예요. 테이블을 구성하는 최소 단위인 셀, 그 셀들을 합쳐 만든 표. 각각을 사용하는 경우의 수를 고려하면 구현 난이도는 무한대로 높아져요. 우리가 흔히 표를…
프론트엔드 모노레포 모노레포는 여러 프로젝트나 라이브러리를 하나의 저장소에서 관리하는 단일 레포를 말합니다. 이를 통해 코드 공유와 의존성 관리가 용이해지고, 많은 개발자에게 일관된 개발 경험을 줄 수 있어요. 또한, 단일 저장소로 모든 프로젝트를 관리하기 때문에 CI/CD 설정을 같이…
프로젝트가 커지고 시간이 지날수록 그동안 잘 사용했던 기반 기술이 더 이상 최선의 선택이 아닌 순간이 와요. 이런 기술을 바꾸지 않고 방치하면 개발 측면에서는 빌드 시간 및 복잡도 증가, DX 하락 등 예측하기 어려운 여러 문제가 일어날 수 있어요. 개발 생산성이 떨어지고 제품 운영 및…
여러분은 라이브러리를 만들어봤거나, 만들어야겠다고 생각해본 적이 있나요? 아마 개발자라면 한 번 쯤은 생각해보셨을 것 같습니다. 라이브러리를 만들 때는 해결하려는 문제와 설계 목적, 그리고 개발자의 요구에 따라 고려해야 하는 요소들이 다양합니다. 그중에서도 라이브러리가 다양한 환경에서…
스마트폰에서 드래그 앤 드롭(Drag & Drop) 많이 사용해 보셨을 텐데요. 리스트에 있는 요소의 순서를 변경할 때 드래그 앤 드롭은 많은 사용자에게 편하고 직관적인 UX로 보이죠. 하지만 장애를 가진 사용자에게는 불편한 UX가 되기도 해요. 특히 터치스크린은 정밀한 조작이 필요하기…
안녕하세요. 토스뱅크 프론트엔드 개발자 강현구입니다. 프론트엔드 개발자라면 transpiler를 한 번쯤은 들어보거나 사용해 봤을 거예요. 프론트엔드 생태계가 빠르게 발전하면서, transpiler는 애플리케이션을 만들고 배포하는 과정에서 빠질 수 없는 필수 요소가 되었어요. 토스뱅크에…
토스 기술 조직의 각 챕터는 라이트닝 토크에서 다양한 주제에 대한 인사이트와 아이디어를 자유롭게 공유합니다. 기록을 통해 생생한 라이트닝 토크 현장을 함께 느껴보세요! 오늘 다룰 내용은, 많아요. 사실 이렇게 많을 줄 몰랐어요! 주제는 패키지 매니저 인데요. 어떤 기술을 왜 선택했는지…
안녕하세요. 저는 토스의 광고 제품과 플랫폼을 개발하는 서버 개발자 함종현입니다. 저는 토스에서 라이브 쇼핑 보기 서비스를 담당하고 있어요. 라이브 쇼핑 보기 서비스란 라이브 쇼핑 보기는 토스의 “혜택” 탭에 있는 서비스예요. 라이브 쇼핑 보기를 통해서 유저는 상품을 구매하면 포인트를…
300명이 넘는 개발자와 디자이너를 위한 디자인 시스템을 4명의 디자이너가 운영하고 있어요. 이 과정에서 컴포넌트의 유려함뿐만 아니라, 가이드의 효율적인 제작도 중요함을 깨달았어요. 이번 아티클에서는 TDS 컴포넌트 가이드를 제작할 때 어떤 부분들을 고려해서 만들어가고 있는지 소개해드릴…
안녕하세요, 토스 프론트엔드 엔지니어링 헤드 박서진입니다. 토스에서는 최고의 사용자 경험이 필요한 곳은 Native, 매일매일 실험으로 제품을 개선하는 제품은 React Native/WebView로 구성하고 있어요. 토스 프론트엔드 챕터는 지난 2022년 6월부터 React Native…
다른 회사나 서비스에서 만든 API를 사용해 본 경험이 있으신가요? 복잡한 API를 파악하거나 새로운 업데이트를 적용하려고 할 때 설명이 정확하지 않다면 API를 적용하는 데 어려움을 겪죠. 그래서 API를 외부 개발자에게 제공할 때, 명확하고 쉽게 이해할 수 있는 문서는 필수적이에요.…
UX 리서치에 관심 있는 분들과 커피챗을 하면 듣게 되는 공통적인 질문이 있어요. “토스 UX 리서처는 어떤 리서치 방법론을 쓰나요?” “토스 UX 리서처는 리서치를 처음부터 끝까지 혼자서 하는 구조인가요?” 이 질문을 들었을 때 딱 잘라 답을 드리기 어려우면서도, 언젠간 시원하게 풀어…
토스페이먼츠의 결제는 JavaScript SDK에서 시작돼요. 그래서 안정적인 SDK 배포는 무척 중요하죠. 이 중요도 만큼 SDK 기능 및 제품 출시에 대한 팀원들의 부담과 피로도도 높았는데요. SDK의 변경 사항이 모든 결제 가맹점에 동시에 전파되는 배포 방식 때문이었어요. 그래서…
이번 아티클에서는 UX Writing Team이 ‘스스로 참여하고 싶은 프로그램 만들기’라는 모호한 문제에 접근한 방법을 소개해 드릴게요. 배경 작년 하반기에 우리 팀은 ‘문구 한두 개를 더 잘 쓰는 것만으로는 제품의 사용자 경험을 개선하는 데 한계가 있다’는 결론을 내렸어요. 이를 위…
앞선 글 1. Planning에선 문제를 어떻게 정의하는지에 대해 다뤘어요. 구체적인 내용을 기약하고 글을 마무리했는데요, 이 글에선 구체적으로 어떤 작업들을 진행했는지 소개해요. 재구조화 앞선 글에서 소개했듯이 '재구조화'라는 단어는 리팩토링보다 좀 더 거시적인 관점에서의 개선을 뜻해…
온라인 결제 서비스를 운영하는 토스페이먼츠에서는 매일 방대한 양의 로그 데이터가 만들어져요. 만들어진 대부분의 로그 데이터는 Elasticsearch에 보관하면서 분석과 시각화에 사용하고요. Elasticsearch에서 많은 양의 로그 데이터를 다루기 위해 여러 개의 노드를 하나로 묶는…
이 화면은 토스 앱에서 여러 가지 옵션을 선택하는 방식이었어요. 어떤 문제가 있는지 느껴지시나요? 1️⃣ 잘 모르겠다. 2️⃣ 알 것 같다. 1번, 2번, 선택 안 하신 모든 분들! 어떤 문제가 있는지 알려드릴게요. 바로 ‘물리적 거리 사용성’인데요 화면 위에서 버튼을 누른 후 아래에서…
데이터베이스는 시스템을 확장하기 어려워요. 주로 샤딩과 복제를 통해 어렵게 확장해야 하는데다가, 이 과정에서 일관성, 가용성, 분할 내성 셋을 모두 만족시킬 수 없다는 점이 널리 알려져 있죠(CAP 이론). 그래서 데이터베이스를 확장할 때는 신중해야 돼요. 가급적 데이터베이스의 부하를…
저희는 지난 8월, 유저 리서치팀에 처음으로 생긴 포지션인 UX Research Partner로 입사했어요. 어느덧 약 6개월이 지난 지금, 유저 리서치팀에 온보딩했던 3개월과 온보딩 후 어떻게 일하고 있는지 들려드릴게요. UX 리서치 파트너가 무엇인가요? 토스의 신입 리서처로서 다양한…
토스페이먼츠는 결제의 다양한 맥락을 다루는 회사이기 때문에 코드 변경과 배포가 신중하게 이루어져야 하는데요. 이런 상황에서 코드 리뷰는 서비스의 안정성을 높일 수 있는 효과적인 방법 중 하나죠. 제가 속한 온보딩 플랫폼 팀에서도 코드 리뷰를 진행하고 있지만, 보다 면밀한 리뷰와 피드백…
지난 콘텐츠에서는 테크니컬 라이터의 역할과 그동안 해왔던 일을 중점적으로 소개해 드렸어요. 이번 콘텐츠에서는 토스의 테크니컬 라이터가 개발자 경험 전반으로 역할을 확장해 온 이야기를 공유해요. 개발자 경험(Developer eXperience)이란? ‘개발자경험’에 대해 들어보신 적 있…
안녕하세요, 저는 토스페이먼츠 테크니컬 라이터 한주연입니다. 지난 3년 동안 토스페이먼츠와 토스 커뮤니티에서 테크니컬 라이터로 일을 해왔는데요. 토스 커뮤니티의 테크니컬 라이터들은 개발자를 위한 문서를 쓰는 것뿐만 아니라, 멋진 개발자 경험을 제공하기 위해 다양한 일을 하고 있답니다.…
토스페이먼츠 정산 플랫폼에서는 가맹점의 모든 정산 거래 건을 처리하고 있는데요. 많은 양의 정산 데이터 처리를 위해 스프링 배치(Spring Batch)와 JDBC(Java Database Connectivity)를 사용해요. 최근 신규 정산 시스템을 구현하는 과정에서 문제가 있었는데요…
이미 운영 중인 제품을 전반적으로 다시 만들거나 리팩토링 하는 경험을 해볼 수 있는 기회는 흔치 않은데요. 운 좋게 팀 내 공감대가 형성되어 여러 팀원과 하나의 제품을 온전히 개선해 볼 수 있었어요. 이 글에서는 구조 개선에 앞서 어떻게 프로젝트를 플래닝하고 진행했는지 소개할게요. 브랜…
지난해 말, 토스페이먼츠 DX(Developer eXperience) 팀은 개발자 경험을 위해 샌드박스라는 제품을 출시했어요. 샌드박스는 브라우저에서 바로 연동 흐름을 체험하고, 테스트 연동을 해볼 수 있는 개발자 도구예요. GitHub 레포지토리를 클론하거나 VS Code를 띄울 필요…
송금은 토스의 최초 서비스이자 토스의 성장을 견인한 대표 기능이에요. 지난 6년간 여러 사람의 손을 거치며 100번 이상의 개선을 거쳤어요. 그래서 거의 완벽에 가까운 송금 플로우가 만들어진 상태였죠. 제가 송금 제품을 맡았을 때 그 점이 가장 부담이었어요. 이미 고도화된 제품에 디자이…
저번 아티클에서 토스 팀이 직접 개발한 그래픽 AI, 토스트를 소개해 드렸어요. 이번 글에서는 토스트로 이미지를 만드는 구체적인 방법과, 실제 토스 팀에서 활용한 사례들을 보여드릴게요. 금융 콘텐츠를 위한 2D 그래픽 만들기 토스에서는 토스피드를 비롯해 다양한 금융 콘텐츠를 제작하고 있…
여러분은 AI를 업무에 얼마나 활용하고 있나요? 토스에서는 그림 그려주는 AI, 토스트(tosst) 서비스를 사내에 오픈했어요. 토스트에 정보를 입력하면 그래픽이 몇 분 만에 만들어집니다. 토스 그래픽디자이너가 만든 것과 같은 톤과 퀄리티로요. 토스가 그래픽 AI를 만들게 된 이유 토스…
제품을 개발하다 보면 사용자가 어떻게 제품을 사용하는지, 제품을 사용할 때 어떤 행동을 했는지 알아야 할 때가 있어요. 그래서 우리는 로그 데이터를 사용해요. 로그를 기록하는 것을 '로깅'이라고 하는데요. 로깅으로 수집한 데이터로 사용자의 행동을 분석하거나, A/B 테스트의 결과를 확인…
토스의 백엔드로 오는 요청은 모두 Spring Cloud Gateway 기반의 API Gateway를 통해 클러스터로 들어와요. 그리고 클러스터 안에서는 수많은 서버들이 Spring WebClient를 통한 REST API로 통신해 요청을 처리해요. 최근 두 가지 도구에서 동일한 Mem…
여러분은 디자인을 빨리 만들기 위해서 어떤 과정을 거치나요? 대부분 백지에서 시작하지 않고 관련된 레퍼런스를 먼저 찾아볼 거예요. 그런데 내가 속한 회사 내에도 수백 개의 제품이 있다면 어떨까요? 토스는 금융뿐만 아니라 통신, 쇼핑, 결제, 공공 서비스, 헬스 등 매우 다양한 맥락의 제…
이전 글 ‘null은 왜 나쁠까?’의 핵심은 코드를 읽는 사람의 입장을 생각하자는 거였어요. 이번 글에서는 코드를 사용하는 사람의 입장에 관해 이야기해 볼게요. 재전송, 메일 수신자 필터링, SMS 전송(fallback) 등 다양한 기능을 제공하는 메일 발송 기능이 있다고 상상해 볼게요…
토스에서 킥보드도 빌릴 수 있다는 사실, 알고 계시나요? 킥보드 서비스를 디자인하게 된 제가 제일 먼저 한 일은 무작정 다른 앱을 다운받는 거였어요. 킥보드 앱은 차고 넘쳤고, 10개 정도를 보다 보니 다 비슷하게 생겼더라고요. 그래서 별 의심 없이 화면을 토스답게 바꾸기만 하고 있었죠…
지난 심플리시티23에서 많은 분이 UX리서치, 특히 “사용자를 어떻게 만나는지”에 대해 궁금해하셨더라고요. 토스팀에서 팀원들이 사용자를 더 쉽고, 빠르고, 편하게 만날 수 있도록 고군분투하고 있는 ‘리서치 플랫폼 팀’에 대해 소개해 보려고 해요. Q. 리서치 플랫폼 팀은 어떤 일을 하나…
얼마 전 토스페이먼츠 서버 모니터링 시스템을 통해 성능 저하 문제를 발견했어요. 약 15,000건 정도의 데이터를 10분 내외로 처리해야 하는 요구사항이 있어 다중 스레드를 활용했는데, 여기서 예상치 못하게 동시성 문제가 생겼습니다. 문제의 핵심은 HTTP 클라이언트 인터페이스인 Fei…
개발자의 고객은 누구라고 생각하시나요? 우리 제품을 사용하는 사용자(End-user)죠. 그런데 또 다른 고객이 있어요. 컴파일 타임의 고객, 바로 동료 개발자입니다. 복잡하고 나쁜 코드는 사용자 고객에게는 버그와 장애를, 개발자 고객에게는 낮은 생산성을 줍니다. 이번 시리즈에서는 사용…
토스 제품 디자인 원칙(PP: Product Principle)엔 “One thing for One Page”라는 원칙이 있어요. 화면 하나에는 명확한 목표 하나만 있어야 한다는 건데요. 이 원칙에 따라 제품을 만들다 보면 ‘퍼널’이 많이 생깁니다. 토스페이먼츠의 제품도 예외는 아니에요…
토스뱅크에는 400개가 넘는 배포 Pipeline 이 있습니다. Pipeline의 개수가 많아지고, 종류가 다양해지고, 동작이 복잡해지며 여러 어려움이 생기는데요. 토스뱅크에서 Pipeline을 유연하고 안전하게 운영하기 위해 노력한 이야기를 소개해 보려 합니다. Pipeline이란?…
안녕하세요. 토스에서 Gateway를 개발하고 있는 서버플랫폼팀 최준우입니다. 토스에서는 목적에 맞는 다양한 Gateway를 사용하고 있는데요. 저는 이번 글에서 이러한 Gateway 아키텍처를 통해 토스가 누리고 있는 장점들과 이를 위해 어떠한 노력을 하고 있는지에 대해 간단히 소개하…
로그 수집 현황 토스증권이 운영하는 서비스와 인프라에서는 매일 수많은 로그들이 생성되고 있고, 이를 Elasticsearch 클러스터로 수집하여 로그를 검색하고 분석하고 있습니다. 이러한 로그들은 약 100여 개의 로그 파이프라인을 통해 하루 기준으로 22테라 바이트, 약 170억 건의…
안녕하세요. 토스증권 프론트엔드 개발자 서현석입니다. 여러분은 ‘아고라(agora)’라는 단어를 들으면 어떤 뜻이 가장 먼저 떠오르시나요? 어원으로 거슬러 올라가면 그리스 도시국가(폴리스)에서 시민들이 자유롭게 토론을 벌이던 장소이자 고대 그리스어로는 ἀγορά, 즉 열린 공간, 광장을…
제품 성장 과정에 따라 적절한 UX가 다를 수 있다는 사실, 알고 계셨나요? 토스의 가입 과정은 테크 블로그에 첫 번째로 소개되었을 만큼 잘 만들었다고 자부하고 있었는데, 데이터를 확인해 보니 가입 완료율이 생각보다 낮았어요. 토스가 성장하면서 가입하는 주요 연령대가 바뀌었기 때문이에요…
제품을 인터랙티브하게 개선하면 경험이 더 좋아진다는 것은 모두 알지만, 인터랙션을 구현하는 비용 때문에 엄두가 나지 않기도 하는데요. 인터랙션 디자이너가 토스팀에 합류했을 때도 마찬가지였어요. 빠른 속도를 중요시하는 토스에서 어떻게 팀원들을 인터랙션에 대해 공감하게 하고 슬릭한 제품을…
장기적으로 진행되는 큰 규모의 사업 제품을 맡은 디자이너라면 한 번쯤 이런 경험이 있을 것 같아요. 디자이너 : 지금 있는 기능을 모으면 이런 모습일 것 같아요.팀원 1 : 그런데 이 사업도 지금 진행 중이고, 이 기능이랑 서비스도 곧 붙이게 될 것 같아요. 이것들이 들어갈 곳이 고려되…
토스 프론트엔드 챕터는 유저가 경험하는 로딩 시간을 줄이기 위해 지속적으로 노력하고 있습니다. 특히 Slash 22를 통해 서버 사이드 렌더링(SSR)를 이용한 개선 사례를 소개드린 적이 있는데요. 이번 아티클에서는 Next.js 도입 과정에서 마주한 문제와 해결 방법을 소개할게요. 서…
전통적인 환경의 보안 아키텍처는 방화벽과 같은 경계를 기준으로 신뢰와 비신뢰를 나누어서 운영이 되고 있었는데요. 신뢰 구간에서의 추가적인 보안 통제가 없으면서 신뢰의 크기가 커진다면 그만큼 보안의 Risk들도 증가하게 된다는 한계점들이 있었고, 다원화 된 Identity 관리, 보안 솔…
토스뱅크는 기존의 공급자 중심의 뱅킹 서비스를 고객 중심으로 변화시키기 위해 많은 노력을 기울이고 있어요. 그러나 기존의 전통적인 뱅킹 시스템을 구현하는 방식으로는 안정적인 고객 중심 뱅킹 서비스 제공에 여러 기술적 한계가 있었죠. 이번 아티클에서는 토스뱅크가 어떤 방식으로 기술적 한계…
100만 줄. 이게 뭐냐고요? 바로, 토스 iOS 앱의 코드량입니다. 토스팀은 사용자에게 가치를 전달하기 위해 끊임없이 서비스를 개발해왔어요. 지금 토스 앱 안에는 수백 개의 서비스가 들어있습니다. 그렇게 성장해오는 동안, 토스 iOS 앱도 Swift 100만 줄이 넘는 거대한 프로젝트…
그동안 토스팀에서 꽤 많은 슬랙봇을 만들었어요. 그러면서 좋은 슬랙봇 디자인에 대해서도 치열하게 고민했어요. 이 고민의 흔적을 나누면 업계 커뮤니티에도 도움이 될 거로 생각해서 이렇게 글을 써봅니다. 제가 그동안 만들었던 봇 중 일부인데요. 업무 시간 중에 커피를 빠르게 주문하도록 슬랙…
처음 프로덕트 브랜딩 팀이 만들어졌을 때, 뭐하는 팀인지 스스로도 혼란스러운 시간이 길었어요. 어떻게 팀의 정체성을 만들어나갔는지, 어떤 방황이 있었는지 공유해보려고 해요. Q. 토스 Product Brand Designer는 어떤 일을 하나요? Brand Designer와 어떻게 다른…
안녕하세요, 토스 프론트엔드 개발자 진유림입니다. 저는 개발을 처음 배울 때부터 커뮤니티 안에서 성장해왔는데요. 9XD, GDG, Facebook Developer Circle등 다양한 온/오프라인 커뮤니티에서 각양각색의 개발자를 만나며 IT업계에 대한 애정을 키우고, 지식은 나눌수록…
토스는 왜 이모지 폰트를 만들었을까? 토스페이스는 토스의 그래픽 스타일로 디자인한 이모지 폰트입니다. 이모지 폰트는 문자가 아닌 그림 🖼️ 으로 이루어진 독특한 폰트예요. 하나의 유니코드마다 사회적으로 약속된 의미를 표현하고, ttf 형식으로 키보드에서 한 자씩 찍어 사용한다는 점에서…
저는 2020년 초부터 토스팀 최초의 Product Designer(Tools)로 일하기 시작했어요. 새 직무를 만들어 가면서 배운 점을 들려드릴게요. Product Designer(Tools) 직무가 뭐예요? Product Designer(Tools)라는 직무가 생소하실 텐데요. 토스…
토스 디자인 컨퍼런스가 2년 만에 돌아왔어요. 이번 <Simplicity 23>은 5가지 카테고리로 구성되어 총 23개 세션으로 디자이너 분들을 찾아갈 예정이에요. 토스팀이 어떤 마음으로 이번 컨퍼런스를 준비했는지 들려드릴게요. 사전신청 바로가기(링크) 멋진 성과가 아니라 과정 중심의…
토스 보안기술팀(Security Tech)에서는 개발 서비스 외에도 회사에서 사용하는 프레임워크나 Third-party 시스템의 취약점을 연구하고 있어요. 이번 아티클에서는 Node.js의 Built-in API 중 하나인 url.parse() 의 Hostname Spoofing 취약점…
토스 Interaction Designer는 어떤 일을 하나요? 다른 회사의 Interaction Designer와 어떻게 다른지, 토스 팀만의 강점이 궁금해요. 토스 제품의 인터랙션을 담당하고 있어요. 사용자들이 앱을 더 편리하게 사용할 수 있도록 화면을 개선하는 일을 해요. 전반적으…
토스 UX Researcher는 어떤 일을 하나요? 제품을 만드는 모든 팀에서 사용자에 대한 고민이 생기면 고민을 같이 풀어나가는 일을 해요. 예를 들어, “잘 쓸 줄 알고 열심히 만들었는데, 사람들이 왜 안 쓸까요?” 같은 질문이기도 하고요. “사장님의 불편을 해소하는 제품을 만들고…
라이팅 팀은 토스 제품 안에 있는 문구를 관리하고 있어요. 저희 팀의 강점은 라이팅 팀뿐만 아니라 조직 전체가 라이팅을 잘할 수 있게 만드는 것인데요. 매끄러운 커뮤니케이션을 위한 문구 개선은 물론, 그 문구를 라이팅 팀뿐 아니라 모든 팀원이 쓸 수 있도록 원칙을 만들기도 하고, 시스템…
뭐든 알고 쓰는 게 참 중요한 것 같습니다. 단순히 “지금은 잘 돌아가니까 문제 없다”는 접근은 문제가 발생하기 전까지는 문제를 방치하기 마련입니다. 사용하는 기술이나 구조에 대해 끊임없이 질문을 던지고 탐구하는 과정은 토스팀 코어밸류 3.0 중 하나인 Question Every Ass…
코딩 컨벤션을 일관적으로 유지하기 일관적인 코딩 컨벤션을 가지면 코드를 읽기 쉬워지고, 안티패턴을 방지할 수 있습니다. 결과로 버그도 줄고, 코드를 쉽게 유지보수할 수 있죠. 하지만 이것을 사람이 직접 적용하는 것은 한계가 있기 때문에, 여러 가지 정적 분석 도구를 활용하게 됩니다. J…
최소한의 코드로 문서 작성하기 들어가며 토스페이먼츠에서는 두 가지 장점 때문에 Spring REST Docs를 권장하고 있는데요. 첫 번째는 문서 작성 단계부터 API를 통합 테스트할 수 있다는 점, 두 번째는 인터페이스의 의도치 않은 변경을 감지할 수 있다는 점 때문입니다. 하지만 S…
선언적인 코드(Declarative Code)는 프론트엔드 개발을 하다 보면 자주 만나게 되는 개념입니다. 특히 React 생태계에서 웹 서비스를 개발하다 보면 선언적인 코드에 대해 고민하게 되는데요. 이번 아티클에서는 토스 프론트엔드 챕터에서 생각하는 선언적인 코드란 무엇인지, 그리고…
토스의 제품 디자인 원칙 중에는 Value first, cost later라는 항목이 있어요. 비용을 말하기 전에 가치를 명확하게 전달해야한다는 내용이에요. 언뜻 생각하면 당연해 보이는 내용이지만, 종종 해야 할 액션을 설명하는 것에 집중한 나머지 가치를 생략하고 사용자에게 결정이나 비…
저는 토스가 첫 금융권 회사예요. 그래서 입사하기 전에 굉장히 긴장을 했었죠. 왜냐하면 토스는 일이 굉장히 빠르게 돌아가는 조직이라고 들었는데, 금융이라는 새로운 분야를 빠르게 학습하고 따라갈 수 있을지 걱정이 됐거든요. 아니나 다를까, 1년 반 동안 무려 4개의 새로운 분야를 학습해야…
토스 팀원이면 누구나 개인 법인 카드를 1장씩 가지고 있어요. 이 카드로 식대나 택시비, 교육비 등 업무와 관련된 것이라면 자율적인 판단 하에 결제할 수 있어요. 자유롭게 사용하되, 모바일 또는 PC로 어디에 사용했는지 그 용도와 내역을 적어 제출해야 해요. 재무팀에서 그 내용을 바탕으…
토스 앱은 넓은 범위의 기기를 지원하면서도 현대적인 JavaScript를 이용해서 개발되고 있습니다. 그렇지만 최신 JavaScript를 오래된 브라우저 위에서 실행하기 위해서는 “Polyfill” 문제를 해결해야 하는데요. 이번 아티클에서는 Polyfill 문제가 무엇인지 알아보고,…
세 번 이상 반복하고 있는 업무가 있나요? 토스에는 팀원들이 업무를 잘할 수 있게 하루 종일 도와주는 인터널 제품들이 있어요. 이런 제품들은 운영 비용을 절감하고 업무를 효율적으로 돕는 중요한 가치를 제공해요. 툴즈 프로덕트 디자이너는 이런 인터널 제품을 만드는 것은 물론, 이 제품을…
툴즈 프로덕트 디자이너? 토스에는 Tools Product Designer라는 직군이 있어요. 토스 팀원들이 빠른 속도로 혁신할 수 있도록 인프라를 만드는 일을 해요. 내부 제품을 만드는 팀도 일하는 방식은 다른 팀과 크게 다르지 않은데요. 어떤 제품 혹은 인프라를 만들었을 때 임팩트가…
토스에는 제품 디자인 원칙인 product principles가 있어요. 토스 제품의 winning strategy 를 담고 있고, 좋은 제품의 기준이 되는 원칙들인데요. 이 기준을 가지고 더 활발하게 피드백하기도 하고, 사용자에게 미친 만족감을 주기 위한 원동력 삼기도 한답니다. 오늘…
안녕하세요. 토스증권 QA팀에서 일하고 있는 QA Manager 황채은입니다. 지난 글에서 잠깐 언급되었던 토스증권의 Closed Beta Test 기억하실까요? 🔗 지난 포스팅 참고하기 링크 오늘은 해외 증권 서비스 출시를 위해 토스증권 임직원 대상으로 진행한 Closed Beta T…
저희 디자인 챕터는 100명이에요. 디자이너와 디자인을 돕는 여러 직무로 이루어져 있어요. 인턴부터 토스를 5년 넘게 다닌 디자이너까지 각자 스테이지에서 최선을 다해 성장하려고 애쓰고 있어요. 저는 디자인 챕터의 성장을 돕는 일 중에 신규입사자를 돕는 온보딩 과정을 설계했어요. 디자인…
토스뱅크카드 만들어 보셨나요? 토스뱅크가 출범한 지도 벌써 1년이 지났는데요. 당시에 카드를 발급받으신 분이라면 이 화면을 경험하셨을 거예요. 이 화면에서 4가지 색상의 카드 중 어떤 색을 고를지 한참을 고민하셨다면 저는 너무 뿌듯할 것 같아요. 카드를 고르는 사용자를 위해, 어떻게 디…
데코레이터는 비즈니스와 상관 없는 로직들을 숨기면서 기능을 변경하거나 확장할 수 있게 합니다. 또한 여러 클래스에서 반복되는 공통 관심사가 있을 때 데코레이터를 사용하면 중복된 코드를 줄이고 코드를 모듈 단위로 관리하는 효과를 거둘 수 있습니다. 이런 이유로 저희 Node.js Chap…
UX 라이팅에서는 모든 팀원이 같은 기준으로 글을 쓰는 게 중요해요. 토스에는 모두가 같은 기준으로 글을 쓸 수 있는 여러 가지 인프라가 준비돼있어요. 크게 다섯 가지로 분류할 수 있는데요. 토스 라이팅 시스템 피라미드 위에서 아래로 내려갈수록 추상적인 개념에서 구체적인 개념으로 내려오…
지난 아티클에서는 좋은 에러 메시지의 기준을 이야기했어요. 하지만 기준이 있어도 아무도 그것을 따르지 않고 실제로 적용되지 않으면 의미가 없겠죠. 기준을 만드는 일은 라이팅 팀 단독으로 할 수 있지만, 그것이 팀에 전파되게 하려면 팀원분들의 공감대를 얻어야 해요. 그러기 위해서 좋은 기…
토스 Node.js 챕터에서는 높은 코드 가독성과 품질을 위해 TypeScript의 타입 시스템을 적극적으로 활용하고 있고 이에 대한 이해도를 높이기 위해 스터디를 꾸준히 진행하고 있습니다. TypeScript의 타입 시스템에 대해 공부해보던 중 알게된 흥미로운 몇가지 토픽들을 소개하려…
안녕하세요. 저는 3년 전 토스의 첫 QA Manager로 입사해서 현재 토스증권 QA팀에서 일하고 있는 곽수정입니다. 길다면 긴 3년이란 시간 동안 즐겁고 재밌게 일할 수 있었던 토스와 토스증권의 QA팀을 소개해보려고 해요. QA가 없었던 토스팀, 왜 첫 번째 QA Manager를 채…
토스 앱에는 little big detail 이 많은데요, 그중 하나를 소개하고 싶어요.바로 불필요한 클릭 없애는 방법이에요. 왜 불필요한 클릭을 줄여야 할까요? 이유는 단순해요. - 사용자가 더 빠르게 원하는 태스크를 수행할 수 있어요. - 빠른 속도나 빠르다는 인상을 주게 되어 사용…
6월 말 어느 날, IT 동아리 팀원 분이 요런게 있다며 링크를 공유해주셨어요. 저는 링크를 누르기도 전에 챌린지라는 단어와 이미지만 보고 ‘재밌겠다!’라는 생각이 들었어요. 링크를 확인해보니 신입이든 10년 차 경력이든 누구나 참여할 수 있다는 사실에 더욱 관심이 가게 되었어요. “이…
토스 프론트엔드 챕터에서는 개발 생산성을 극대화하기 위해 코드를 지속적으로 라이브러리로 만들고 있습니다. 그 결과 지금은 100개가 넘는 라이브러리를 운영하고 있습니다. Node.js 12부터 ECMAScript Modules라는 새로운 Module System이 추가되면서, 기존의 C…
지난 6월, 토스 디자인 챕터는 프로덕트 디자이너 챌린지를 열었어요. 새로운 채용 형식에 많은 분이 관심을 가져주신 덕분에 좋은 분들을 모실 수 있었는데요. 토스가 왜 디자이너 채용으로 챌린지를 열게 되었는지 이야기해보려고 해요. 지원자 입장에서 생각하기 이전에도 토스 디자인 챕터는 디…
에러 메시지, 어떻게 쓰는 게 좋을까요? 애플 로그인 에러 메시지 이 화면은 제가 가장 최근에 겪은 에러 메시지인데요. 로그인을 하려는데 자꾸 오류가 발생했대요. - 비밀번호를 틀렸나? - 계정에 문제가 생겼나? - 인터넷 연결이 안 된 건가? 스스로 에러의 원인을 유추해가며 해결해야…
에러 메시지, 어떻게 쓰는 게 좋을까요? 애플 로그인 에러 메시지 이 화면은 제가 가장 최근에 겪은 에러 메시지인데요. 로그인을 하려는데 자꾸 오류가 발생했대요. - 비밀번호를 틀렸나? - 계정에 문제가 생겼나? - 인터넷 연결이 안 된 건가? 스스로 에러의 원인을 유추해가며 해결해야…
때는 바야흐로 2018년 저는 당시에 토스 가입과정을 디자인 하게 되었어요. 토스의 가입 과정은 처음 만들어지고 나서 한동안 개선하지 않은 상태였거든요. 많은 디자이너들이 경험하듯, 가입 과정을 하나하나 뜯어보니 디자인 시안과 실제로 구현된 화면이 약간 다르다는 사실을 발견했어요. 그…
테스트 코드는 애플리케이션 코드 못지 않게 높은 품질을 유지해야 합니다. 낮은 품질(이해하기 어려운 코드, 여기저기 깨져있는 테스트)의 테스트는 유지보수가 어렵고 기술부채에 못지 않은 부채로 다가옵니다. 그래서 테스트 코드의 높은 품질을 유지하기 위해 다양한 Builder, Helper…
TL;DR Result 를 이해한다면, MSA 환경에서 에러가 전파되지 않도록 막을 수 있습니다.runCatching 과Result 를 사용하면 에러 핸들링을 클라이언트에게 위임할 수 있습니다. 예제: 로그인 요청을 전달하는 서비스 흐름에서 에러 처리하기 아래와 같은 서비스 호출 흐름이…
REST Docs 테스트 코드량을 70% 줄여주는 DSL 개발기 읽는 데 걸리는 시간: 6분 DSL Domain Specific Languages(DSL)은 코드의 내부 로직을 숨기고 재사용성을 올려줍니다. 어떤 경우는 비 개발자가 사용하도록 고안되는 경우도 있어서, 일반적인 프로그래밍…
들어가면서 SPA(Single Page Application) 구조로 웹 프론트엔드 애플리케이션이 개발되면서 초기 렌더링 속도는 프런트엔드 개발자에게 중요한 과제 중 하나가 되었습니다. 사용자 경험에 영향을 줄 수 있는 가장 큰 요소 중 하나가 바로 속도이기 때문입니다. 이번 개선은 W…
이 글은 토스페이먼츠에 입사하신, 혹은 입사를 고려 중인 개발자분들을 위해 작성된 글입니다. 애자일하게 일하기 애자일하게 일한다는 것은 어떠한 의미일까요? 한 시간을 일하면 한 시간 만큼의 가치를 만들어 내는 방식이 아닐까 합니다. 예를 들어, 동작하는 함수를 구현하거나 난해한 개념을…
2020년 11월 TypeScript 4.1이 출시되면서 "Template Literal Type"을 사용할 수 있게 되었습니다. TypeScript로 JSON Parser를 만들거나, document.querySelector 의 결과 타입을 추론할 수 있게 되어 화제가 되었는데요. 이…
토스 프론트엔드 챕터에서는 지난해부터 의존성을 관리하기 위해 Yarn Berry(v2)를 도입했습니다. 처음에는 일부 레포지토리부터 시작하여, 현재는 대부분의 레포지토리에 Yarn Berry가 적용되어 있는데요. 토스팀이 새로운 패키지 관리 시스템을 도입하게 된 배경과 사용하면서 좋았던…
토스 프론트엔드 챕터에서는 100개 이상의 서비스들이 작은 패키지 단위로 쪼개져 활발하게 개발되고 있는데요. 공통으로 사용하는 라이브러리에서 인터페이스가 변경되는 Breaking Change가 발생하면, 의존하고 있는 모든 서비스의 코드를 수정해야 했습니다. 관리하는 코드베이스가 점점…
토스 프론트엔드 챕터에서는 웹 성능을 최대한으로 높이기 위해 HTTP 캐시를 적극적으로 사용하고 있습니다. 캐시를 잘못 관리했을 때, 원하는 시점에 캐시가 사라지지 않을 수 있습니다. 필요 이상으로 HTTP 요청이 발생하기도 합니다. HTTP 캐시를 효율적으로 관리하려면 Cache-Co…
안녕하세요. 토스 프론트엔드 챕터 블로그에 오신 것을 환영합니다. 앞으로 토스팀에서 프론트엔드 개발을 하면서 생기는 이야기들을 정리하여 블로그로 전해드리려고 합니다. 토스 프론트엔드 챕터는? 토스에서는 같은 일을 하는 사람들을 모아서 챕터라고 합니다. 프론트엔드 챕터는 JavaScrip…