손끝에 닿는 자연스러움을 설계하는 사람들
제대로인터뷰 - 카카오페이증권 FE 개발자를 만나다
카카오페이증권의 서비스 대부분은 웹뷰(Webview) 기반으로 개발됩니다. 하나의 서비스 안에서 웹과 앱이 함께 움직이기 때문에, 자연스러운 사용성이 무엇보다 중요하죠. 특히 숫자와 차트가 실시간으로 변하는 증권 서비스에서는 ‘불편하지 않음’을 만드는 일이 곧 기술력이 됩니다.
카카오페이증권의 서비스 화면을 만드는 FE 개발자들은 서로 다른 목적 조직에 속해 있지만, ‘FE 챕터’라는 이름 아래 느슨하게 연결된 하나의 공동체에서 함께 성장하고 있다고 하는데요. 오늘은 FE 챕터의 Hayden(헤이든), Woogie(우기), Kaya(카야)를 만나, 서비스 화면 너머에서 제대로 일하고 성장하는 이야기를 들어보았습니다.
Q. 안녕하세요! 자기소개와 현재 담당하고 계신 업무를 소개해주세요.
왼쪽부터 FE챕터 소속 Hayden, Woogie, KayaHayden. 안녕하세요. 프론트엔드 개발자 Hayden입니다. 카카오페이증권에서 ‘주식 모으기’ 서비스를 1년 정도 개발하다가, 최근에는 보유 잔고와 자산을 조회할 수 있는 계좌 서비스를 개발하고 있어요.
Woogie. 저는 투자정보실에서 커뮤니티 TF 소속으로 일하고 있는 프론트엔드 개발자 Woogie입니다. 주식 토론방 관련 화면을 주로 개발하고 있어요.
Kaya. 안녕하세요. 프론트엔드 개발자 Kaya입니다. 두 분이 서비스 단위의 목적 조직에 속해 있다면, 저는 기능 중심의 조직에 속해 있는데요. 현재는 계좌개설이나 ISA, 옵션 등 신규 서비스 기능을 주로 담당해서 개발하고 있습니다.
Q. 카카오페이증권 FE개발자는 어떤 일을 하는지 궁금해요.
Hayden. 저희는 카카오페이앱의 ‘증권’ 탭 안에서 웹으로 되는 모든 서비스를 개발하고 있어요. 대표적으로는 카카오페이앱에서 주식 거래를 할 수 있는 서비스, 그리고 카카오톡 환경에서 사용할 수 있는 웹 서비스를 제공해주는 역할을 하고 있습니다.
Kaya. 조금 더 기술적으로 이야기하자면, 증권 서비스이다보니 화면에서 보여지는 데이터들이 실시간으로 바뀌는데요. 실시간 데이터 제어, 네이티브 앱과의 통신, 협업사에 제공하는 SDK 라이브러리 등도 함께 다루고 있어요. 결국 고객이 가장 먼저 마주하는 창구이기 때문에 빠르고 믿을 수 있는 경험을 만드는 것을 핵심 과제로 두고 일하고 있어요.
Q. FE개발자로서 카카오페이증권에서 경험할 수 있는 특별함이 있다면요?
FE챕터 HaydenHayden. 저는 입사 당시 증권 도메인에 대한 지식이 전혀 없었는데, 기획부터 디자인, 개발, 코드리뷰까지 함께 논의하면서 자연스럽게 증권 도메인을 익힌 케이스에요. 단순히 API 데이터를 받아와서 그리는게 아니라 어떤 데이터를 처리해서 화면에 그릴지 고민하면서 꼼꼼하게 설계하고 화면으로 구현하는 모든 과정을 경험할 수 있어요.
Kaya. 금융 서비스 특성상 보안 요건이 굉장히 까다로워요. 본인인증, 보안 모듈, 금융 규제 대응 등 일반적인 웹 서비스에서는 접하기 어려운 부분을 경험하면서 성장할 수 있어요. 또 카카오톡, 카카오페이 이 두가지 앱을 넘나드는 플로우를 설계하는 것도 저희의 역할인데요. 이것도 카카오페이증권에서만 경험할 수 있는 특별함 중 하나라고 생각해요.
Woogie. 또 주식 서비스는 차트나 금액 등 실시간 데이터가 많고 트래픽 변동도 크기 때문에, 항상 속도와 안정성을 고민해야 하거든요. 장 시작 전후에는 트래픽이 급격하게 증가할 수 있기 때문에 여러 최적화 기법을 끊임없이 공부하고 활용해서 성능을 유지해야 합니다.
Q. 주식 차트, 커뮤니티 화면처럼 속도가 중요한 기능이 많은데요.
빠르고 안정적인 서비스를 위한 FE개발자들만의 노하우가 있울까요?
Kaya. 렌더링 효율화와 초기 로드속도의 최적화가 정말 중요해요. 데이터가 실시간 들어오는 화면은 불필요한 리렌더링을 막기 위해서 가상 스크롤링, 컴포넌트 구독 주기 제어, 메모이제이션 같은 기법을 적극적으로 사용하고 있고, 초기 로드 속도를 높이기 위해서 많은 서비스 화면에서 SSR을 도입하고 있어요. 또 리소스 캐싱 주기를 관리하면서 다양한 최적화 방법들을 시도하면서 빠르고 안정적인 서비스를 제공하기 위해 노력하고 있어요.
Hayden. 신규 서비스를 개발하는 것도 중요하지만, 배포된 서비스를 안정적으로 운영하는 것도 중요한데요. 그것을 보완해주는게 모니터링이라 생각해요. 서버 환경에서 네트워크 요청이 이뤄질 경우 개발자 도구에서 확인이 어려운데, 에러가 지속적으로 발생하면 바로 슬랙(Slack)으로 알림이 오고, 서버 로그를 통해서 특정 유저가 겪고 있는 오류를 추적해서 빠르게 해결하고 있어요.
오류 발생시 Slack으로 받게되는 메시지Woogie. 서비스를 운영하다보면 프론트엔드만의 최적화로 해결되지 않는 부분도 있기 마련인데, 그럴땐 TF의 프로덕트 매니저, 프로덕트 디자이너, 서버 개발자와 적극적으로 논의하여 성능 이슈를 해결하는 문화가 자리잡고 있어요. 만약 기획으로 잘 풀리지 않거나 디자인적으로 성능이 저하되는 화면들이 있다면, 개발 단계에서 긴밀하게 협업을 해서 문제를 해결하기도 하고 반대로 기획 단계에서부터 설계를 하기도 하죠.
Q. 카카오페이증권 서비스의 많은 부분이 웹으로 구현되어 있다고 하셨는데요.
그렇다면 웹뷰와 네이티브의 개념을 쉽게 설명해주실 수 있나요?
Hayden. 웹뷰(WebView)는 앱 안에 내재되어 있는 웹 브라우저라고 생각하면 돼요. 웹뷰를 사용하게 되면 버전과 상관없이 한번의 배포로 모든 유저가 동일하게 최신화 된 서비스를 볼 수 있어요. 또 앱 배포 심사를 하지 않고 서비스를 고도화해 나갈 수 있죠. 그래서 빠르게 개발을 적용할 수 있다는 점이 웹뷰의 가장 큰 장점이에요.
네이티브는 스마트폰 운영체제(OS)에 맞게 직접 개발된 앱이에요. 속도는 빠르지만 새로운 기능이 들어가기 위해서는 배포 심사를 거쳐야하기도 하고, 사용자가 업데이트도 해야하기 때문에 속도라는 장점은 살리고 다른 단점들을 최소화하기 위해서 두 가지를 적절히 섞어서 사용하고 있어요.
카카오페이증권 네이티브와 웹뷰 화면 예시Kaya. 신분증 촬영이나 Face ID 같이 기능을 직접 다뤄야 하는 부분은 주로 네이티브에서 처리하고, 빠르게 배포하고 확장해야하는 서비스 화면들은 웹뷰로 구현하고있어요. 대표적으로 증권 홈, 계좌개설/관리, 투자정보, 주식 모으기, 연금저축 등의 서비스들이 웹뷰로 제공돼요. 특히 규제나 정책이 자주 변경되고, 새로운 상품이 빠르게 추가되는 서비스들은 웹뷰 기반 개발의 유연성이 큰 장점으로 작용하는 것 같아요.
Woogie. 두 환경이 공존하다 보니 고객 입장에서는 ‘이게 웹인지 앱인지’ 구분이 되지 않아야 하거든요. 그래서 화면 로딩 속도와 화면 전환 방식 같은 디테일을 동일하게 맞추기 위해 노력하고 있습니다.
Q. 앱과 구분되지 않는 자연스러움을 위해 어떤 점을 고려하시나요
좋은 사용자 경험을 만드는 핵심 포인트가 있다면요?
Hayden. 사용자가 서비스를 이용할 때에 화면마다 비슷한 UI가 있어야하고 동작도 비슷해야해요. 웹과 앱에 따라 다르다면 다른 앱처럼 느껴질 수 있으니까요. 그래서 저희는 카카오페이의 통합 웹뷰 환경을 활용하고 있는데요. 덕분에 네이티브 기능 호출이나 스트리밍 SSR 같은 기술을 적극 활용해 더 빠르고 부드러운 화면을 구현할 수 있죠.
FE챕터 WoogieWoogie. 서비스간 이동, 가로/세로 모드 전환처럼 사용자의 상호 작용 과정에서 클라이언트 환경과 통신이 필요한 경우가 있는데요. 이러한 경우 개발 전 설계 단계부터 클라이언트(Android, iOS) 개발자들과 함께 방향성을 고민하고 있어요. 그리고 앱과 동일한 UI와 인터랙션을 제공하는 것을 고려하기 위해 디자인 시스템을 사용하고 있어요. 디자인 시스템은 프로덕트 디자이너, 클라이언트 개발자, 프론트엔드 개발자 크루들이 함께 정의한 규칙인데요. 디자인 시스템을 통해 앱과 웹 환경에서 동일한 UI를 제공하면서 사용자 경험을 신경쓰고 있어요.
Q. FE개발자 내 스터디 문화도 활발하다고 들었어요.
진행하고 계시는 스터디를 소개해주실 수 있나요?
Kaya. 매주 금요일마다 FE끼리 ‘기술 토론’을 진행하고 있어요. 주제는 진행자의 재량에 맡기기 때문에 완전히 자유인데요. 최근 관심 갖게된 새로운 기술이나 업무를 진행하면서 경험적으로 알게된 지식을 공유한다거나, 기술 컨퍼런스 참여했던 후기를 공유하기도 하죠. 기술토론이라는 이름에 걸맞게 특정한 기술관련 주제로 토론을 할수도 있고요.
Hayden. 저도 지금까지 ‘Next.js 이미지 최적화’, ‘React 컴파일러’, ‘SOLID 원칙 적용’ 같은 주제로 발표를 진행했는데, 발표를 준비하면서 한층 깊이 공부할 수 있게 되더라고요. 또 CTF(Chapter Task Force)라는 제도가 있어서, FE 챕터 내에서 개선이 필요하다고 생각이 되는 부분을 주제로 FE 크루가 모여 빠르게 개발해보기도 해요.
Woogie. 투자서비스실은 스프린트 마지막 주에 ‘올데이 테크랩’(All Day Tech Lab)을 운영하고 있어요. 신기술을 리서치하거나 기술 부채를 해결하는 시간이죠. 최근 뉴스 서비스에 SSR을 도입해서 초기 로딩 속도를 약 30% 개선하기도 했습니다.
좌)FE챕터의 <기술토론> / 우) 투자서비스실 <올데이 테크랩>Q. 마지막으로, 여러분에게 ‘제대로 일한다’는 어떤 의미인가요?
앞으로의 목표나 도전하고 싶은 기술이 있다면 알려주세요.
Hayden. 저에게 ‘제대로’는 보이지 않는 부분까지 책임지는 거예요. 웹 접근성은 지키지 않아도 무사히 돌아가고, 눈에 띄는 오류가 발생하지 않아서 쉽게 우선순위에 밀리곤해요. 하지만 그걸 챙기지 않으면 누군가는 서비스를 이용하지 못하죠. 스크린 리더 사용자나 키보드만으로도 불편함 없이 사용할 수 있는 환경을 만드는 게 제 목표입니다.
Woogie. 저는 프로덕트의 성장에 집중하면서 기술적인 역량을 키우는게 제대로 일하는 거라 생각해요. 프론트엔드의 생태계의 트렌드는 변화가 빠른 편인데요. 팀과 프로덕트의 환경에 맞춰서 적절하게 최신 기술을 도입해 서비스의 문제를 해결해나가는게 중요하죠. 최근에는 RUM(Real User Monitoring) 기반의 웹 성능 모니터링 시스템 고도화를 도전해서, 웹 성능을 정량적으로 분석하고 리포팅해보려고 해요.
Kaya. 저는 고객 입장에서 끝까지 생각하는게 제대로 일하는 것이라고 생각해요. 기능 구현에 그치지 않고, 고객이 불편하지 않도록 성능과 경험을 끝까지 챙기는 것. 앞으로도 웹뷰 최적화로 더 빠르고 안정적인 증권 서비스를 만들고 싶어요
.
왼쪽부터 Kaya, Woogie, Hayden유저의 최접점에서 FE 기술로 서비스를 성장시키고 싶다면?
