화면 너머의 사용자 경험까지 설계하는 Frontend팀을 소개합니다.

안녕하세요. 에이아이트릭스입니다.🙌

오늘은 의료진의 '빠른 판단'을 돕는 화면이 어떻게 만들어지는지, Frontend팀의 이야기를 통해 살펴보려 합니다.😊

 

빠르고 정확한 판단이 중요한 의료 현장에서 AITRICS-VC(바이탈케어)의 화면은 의료진의 신속한 의사결정을 돕는 중요한 도구입니다.

 

Frontend팀은 복잡한 의료 데이터를 더 이해하기 쉽고 편리한 사용자 경험으로 풀어내고, 사용자가 제품을 더 자연스럽게 이해하고 활용할 수 있도록 다양한 기능과 흐름을 세심하게 연결해가고 있습니다.

 

이번 인터뷰에서는 Frontend팀이 어떤 기준으로 화면과 기능을 만들어가고 있는지, 더 정확하고 자연스러운 사용자 경험을 위해 어떤 고민과 협업을 이어가고 있는지 이야기를 나눠봤습니다.

 

---

 

Q. 안녕하세요. Frontend팀 소개와 각 팀원께서 맡고 계신 역할에 대해 소개 부탁드립니다.

 

안녕하세요, Frontend팀입니다. 🖥️

저희는 사용자가 가장 먼저 마주하는 제품의 화면을 설계하고 구현하며, 복잡한 의료 데이터를 더 직관적이고 편리하게 전달하는 역할을 하고 있습니다. 사용자가 제품을 더 쉽게 이해하고 활용할 수 있도록 화면과 기능의 흐름을 세심하게 연결하고 있어요.

 

상길 Frontend팀의 방향성과 기준을 잡고, 전체적인 개발 흐름을 이끌고 있습니다. 기술적인 완성도는 물론, 팀이 더 효율적으로 일할 수 있는 방식까지 함께 고민하고 있습니다.

 

남희 Frontend의 기술 기반을 탄탄하게 다지는 역할을 맡고 있습니다. 보안 취약점 대응, OpenAPI 스펙 자동화, Epic FHIR 연동 등 기술적으로 까다로운 과제를 해결하며, 팀 전체의 개발 생산성을 높이는 데 집중하고 있습니다.

 

주현 응급실 전용 클라이언트를 전담하고 있습니다. 유닛 테스트 작성부터 E2E 테스트, 공통 UI 컴포넌트 개선, feature flag 정리까지 VC와 ER 제품 전반의 Frontend의 품질을 책임지고 있습니다.🛡️

 

하은 VC 제품의 기능 개발을 가장 활발하게 수행하고 있는데요. 대시보드, 환자 상세 화면, 리포트, 웹 푸시 알림, 시간대 설정, 다국어 지원 등 사용자가 직접 마주하는 다양한 화면과 기능을 꾸준히 개발하고 다듬고 있습니다!

 

정환 최근 팀에 합류해 코드베이스와 제품의 흐름을 차근차근 익혀가고 있습니다. 앞으로 성능 개선, 구조 정리, 개발 환경 개선처럼 쓰면 쓸수록 더 편해지는 Frontend를 만드는 것을 목표입니다!👀

 

Q. 팀 소개를 들으니 각자 맡은 영역이 뚜렷하네요! Frontend팀만의 독특한 업무 방식이나 팀 문화가 있다면 소개 부탁드립니다.

 

남희 저희 팀만의 문화 중 하나는 ‘Problem 1-Pager’입니다. 새로운 기능을 개발하기 전에 △배경 △문제 정의 △목표 △비목표(Non-goals) △제약 조건을 한 장으로 먼저 정리합니다. 바로 코드를 작성하기보다 ‘왜 이 기능을 만드는가‘를 먼저 팀 안에서 분명하게 맞추는 과정이라고 생각하시면 될 것 같습니다. 이 과정을 거치면 개발을 진행하는 중간에 방향이 흔들리는 일이 훨씬 줄어들어요.😊

 

또 저희는 AI 코딩 도구를 실무에 적극 활용하고 있어요. 반복적인 작업을 자동화해서 개발자가 본질적인 문제 해결에 집중할 수 있는 환경을 만들어가고 있습니다. 테스트를 작성할 때도 요구사항 문서와 연결해 기능이 의도한 대로 동작하는지 더 분명하게 확인하려고 하고요. 성능과 관련해서도 팀 안에서 기준을 따로 정리해두고 있어서, 새로운 코드를 작성할 때 자연스럽게 속도나 안정성까지 함께 고려하게 됩니다.

 

하은 분위기 면에서는 서로 편하게 의견을 주고받는 편이에요. 버그가 생기면 ‘이건 LLM이 작성한 코드라서 그렇다’, ‘분명 리뷰어가 괜찮다고 했다’ 같은 농담도 오가는데요. 그만큼 문제를 혼자 끌어안기보다 같이 이야기하면서 풀어가는 문화가 자연스럽게 자리 잡혀 있는 것 같습니다!😆

 

 

Q. 팀만의 방식과 문화가 잘 자리 잡혀 있다는 게 인상적인데요. Frontend팀에게 특히 기억에 남는 프로젝트나 기능 개발 경험이 있나요?

 

하은 하나의 큰 프로젝트보다는 일하는 방식 자체를 함께 바꿔나간 과정이 가장 기억에 남습니다. 특히 공유 디자인 시스템과 테스트 문화를 만들어간 경험이 그런데요.

처음에는 앱마다 같은 버튼이나 화면 요소도 조금씩 다르게 구현되어 있었고, 하나를 수정할 때도 여러 곳을 동시에 손봐야 하는 경우가 많았습니다. 그래서 공유 컴포넌트 라이브러리를 함께 설계하기 시작했는데, 예상보다 어려웠던 건 기술 자체보다도 팀원끼리 기준을 맞추는 과정이었습니다. 그 과정에서 ‘Storybook’을 소통 도구처럼 활용하게 되면서 논의가 훨씬 수월해졌고, 지금은 새로운 컴포넌트를 만들 때도 ‘공유 패키지로 함께 쓸 수 있을까?’를 먼저 고민하는 문화가 자연스럽게 자리 잡았습니다.

 

주현 테스트 문화도 비슷한 과정을 거쳤습니다. 처음에는 일정이 빠듯한 상황에서 테스트까지 병행하는 것이 쉽지 않다고 느껴질 때도 있었는데요. MSW(Mock Service Worker)를 활용해 백엔드 개발이 완료되기 전에도 테스트를 작성할 수 있게 되고, Playwright 기반 E2E(End-to-End) 테스트로 배포 전 주요 시나리오를 자동으로 검증할 수 있게 되면서 팀 안에 신뢰가 조금씩 쌓이기 시작했어요.👍

특히 누가 시켜서가 아니라 팀을 위해 테스트 가이드를 먼저 정리해 공유하고, 더 나은 방식을 함께 만들어갔던 과정이 인상 깊었습니다. 서로의 코드를 신뢰하고 불편한 점을 솔직하게 이야기하면서 더 나은 개발 방식을 함께 만들어온 경험 자체가 팀에 가장 기억에 남는 과정인 것 같습니다.

 

Q. 이렇게 쌓아온 개발 방식과 협업 문화가 실제 제품 업데이트에서도 큰 역할을 했을 것 같은데요. AITRICS-VC 2.2.0 업데이트 과정에서 Frontend팀은 어떤 준비와 노력을 했나요?

 

남희 AITRICS-VC 2.2.0 업데이트는 큰 전환점이 된 작업이었습니다. 새로운 기능을 추가하면서도 기존 버전의 안정성을 함께 유지해야 했기 때문에, 단순히 화면 몇 개를 바꾸는 수준이 아니라 제품 전반의 흐름과 사용성을 함께 점검해야 하는 과정이었어요. 이를 위해 새 기능을 필요할 때만 켜고 끌 수 있도록 제어하는 Feature Flag(기능 플래그)방식을 활용해, 개발 중에는 새로운 기능을 분리해서 관리하고 기존 화면은 안정적으로 유지할 수 있도록 준비했습니다. 😊

 

화면과 사용성 측면에서도 사용자가 체감할 수 있는 변화가 많았습니다. △대시보드 검색 기능 개편 △환자 상세 모달 재설계 △리포트 화면 개선 △시간대 설정 △다국어 지원 △웹 푸시 알림 등 다양한 영역을 함께 다듬었고, 각각의 기능이 실제 사용 흐름 안에서 더 자연스럽게 작동할 수 있도록 여러 팀과 세심하게 조율해 나갔습니다.

 

주현 배포가 안정적으로 마무리된 이후에는 더 이상 필요하지 않은 Feature Flag를 하나씩 걷어내고, 함께 남아 있던 레거시 코드도 정리하는 작업을 이어갔습니다. 주요 영역을 다시 점검하면서 코드를 더 깔끔하게 정리했고, 다국어 사전도 클라이언트에서 더 효율적으로 불러올 수 있도록 개선했습니다.

 

배포 전후로는 주요 시나리오가 의도한 대로 동작하는지 반복적으로 검증하는 과정에도 많은 공을 들였는데요. 단순히 기능을 추가하는 데서 끝나는 것이 아니라, 실제 사용자 경험이 더 안정적으로 이어질 수 있도록 꼼꼼하게 확인하고 다듬는 과정 자체가 이번 2.2.0 업데이트에서 가장 중요하게 생각했던 부분이었습니다.✅

 

 

Q. 이번 업데이트같은 작업을 진행할 때는 여러 팀과의 협업도 중요했을 것 같은데요. 디자이너, 기획자, Backend팀과 협업할 때 Frontend팀이 가장 중요하게 생각하는 포인트는 무엇인가요?

 

정환 저희가 가장 중요하게 생각하는 건 결국 같은 기준과 언어로 소통하는 것이라고 생각합니다. 디자이너가 구상한 화면, 기획자가 정리한 요구사항, Backend가 제공하는 데이터가 결국 하나의 제품 안에서 자연스럽게 맞물려야 하기 때문인데요. 그래서 각자 이해하는 용어와 기준이 어긋나지 않도록 처음부터 맞춰가는 과정을 중요하게 보고 있습니다.

 

실제로 저희는 SDS(Software Design Specification)를 기준으로 개발을 진행하고, 구현 이후에도 같은 기준으로 다시 확인하려고 합니다. 덕분에 기획 검토나 QA 과정에서도 ‘이 기능이 의도한 대로 구현되었는가’를 조금 더 명확하게 확인할 수 있고, 여러 팀이 함께 일할 때 생길 수 있는 혼선도 줄일 수 있었습니다.

 

하은 특히 Backend팀과의 협업에서는 무엇보다 API(Application Programming Interface) 스펙을 명확하게 맞추는 것이 중요하다고 생각합니다. Frontend가 구현해야 하는 화면과 기능은 결국 Backend에서 전달되는 데이터와 연결돼 있기 때문에, 중간에서 기준이 어긋나면 작은 차이도 실제 사용자 경험에 영향을 주게 되거든요. 그래서 최근에는 API 변경 사항이 Frontend에 더 빠르고 정확하게 반영될 수 있도록 개발 방식을 계속 정리하고 있습니다.  

 

디자이너와의 협업도 비슷합니다. 화면의 의도가 실제 제품 안에서도 최대한 일관되게 구현될 수 있도록 공통된 기준을 함께 맞춰가고 있는데요. 이런 과정이 잘 잡혀 있을수록 불필요한 소통 비용은 줄고, 결국 더 자연스럽고 완성도 높은 사용자 경험을 만드는 데 집중할 수 있다고 생각합니다.

 

Q. 그렇다면 Frontend팀이 사용자 경험(UX)을 위해 특히 중요하게 생각하는 것은 무엇인가요?

 

남희 저희 제품의 사용자는 병원의 의료진이기 때문에, 무엇보다 한눈에 이해할 수 있는가, 그리고 불필요한 동작을 줄일 수 있는가를 중요하게 생각합니다. 바쁜 의료 현장에서 사용하는 소프트웨어인 만큼, 화면이 복잡하거나 흐름이 어색하면 작은 불편도 크게 느껴질 수 있기 때문인데요. 그래서 환자 상세 화면에서 정보가 길어질 때 말줄임표가 자연스럽게 처리되는지, 정렬 버튼의 아이콘이 현재 상태를 직관적으로 보여주는지처럼 비교적 작은 디테일까지도 꼼꼼하게 확인하려고 합니다. 실제로 이런 요소들을 여러 차례 다시 다듬으면서 사용자 입장에서 더 자연스럽게 보이도록 조정한 경험도 있었습니다.

 

또 하나 중요하게 생각하는 것은, 오류가 생기는 순간에도 사용자가 최대한 당황하지 않도록 경험을 설계하는 것입니다. 의료진이 사용하는 제품인 만큼, 에러가 발생했을 때 갑자기 화면이 끊기거나 맥락 없이 다른 페이지로 넘어가면 사용자가 더 큰 불편을 느낄 수 있다고 생각해요. 그래서 서버 문제가 생겼을 때는 적절한 안내를 보여주고, 특정 기능이 실패했을 때도 사용 흐름이 갑자기 끊기지 않도록 최대한 자연스럽게 처리하는 데 신경 쓰고 있습니다. 대시보드 자동 새로고침 주기를 사용자가 직접 선택할 수 있게 한 것도 같은 맥락인데요. 사용자마다 원하는 업데이트 빈도가 다를 수 있는 만큼, 일률적인 방식보다 선택의 폭을 드리는 것이 더 좋은 경험이라고 판단했습니다.

 

 

Q. 사용자 경험을 세심하게 다듬고 있는 만큼, 업무를 하면서 중요하게 생각하는 기준도 분명할 것 같은데요. Frontend팀이 가장 중요하게 생각하는 기준이나, Frontend 개발자로서 꼭 필요한 역량이 있다면 말씀 부탁드립니다.

 

하은 저희 팀이 가장 중요하게 생각하는 기준은 신뢰할 수 있는 코드입니다. 의료 소프트웨어는 작은 오류도 실제 사용 환경에서는 더 크게 느껴질 수 있기 때문에, 코드의 정확성과 안정성을 가장 우선에 두고 있습니다. 그래서 TypeScript를 엄격하게 사용하고, 테스트 코드를 꾸준히 작성하며, 코드 리뷰를 통해 서로의 코드를 꼼꼼하게 확인하는 문화를 중요하게 생각하고 있어요.

 

Frontend 개발자에게 꼭 필요한 역량은 결국 사용자의 눈으로 보는 능력이라고 생각합니다. 기술적으로 잘 구현된 화면이라도 사용자가 불편하게 느낀다면 좋은 경험이라고 보기 어렵기 때문인데요. 화면을 만들 때마다 ‘내가 이 기능을 처음 본다면 어떻게 느낄까?’, ‘조금 더 쉽게 이해할 수 있는 방법은 없을까?’를 계속 고민하는 태도가 중요한 것 같습니다.

 

또 하나는 복잡한 것을 단순하게 풀어내는 능력입니다. Frontend는 다양한 요구사항과 기술적인 조건을 함께 고려해야 하는 역할이지만, 그렇다고 해서 결과물까지 복잡해져서는 안 된다고 생각해요. 저희도 팀 안에서 과도한 엔지니어링은 지양하고, 가능한 한 더 명확하고 단순한 방식으로 문제를 해결하려고 노력하고 있습니다. 결국 사용자가 자연스럽게 이해하고 편하게 사용할 수 있는 화면을 만드는 것이 가장 중요한 목표라고 생각합니다.

 

Q. 분위기를 조금 바꿔서, 2026년 Frontend팀의 목표를 가볍게 들어봐도 될까요? 

 

상길 모든 업무를 LLM에게 떠넘기고 싶습니다. 물론 아무도 모르게요… 🤣

 

정환 행복과 슬픔에 대한 기준을 세우는 것이 목표입니다.

 

하은 로또 1등에 연속 3번 당첨되고, 파워볼 1등까지 당첨되는 것이 목표입니다.✨

 

주현 코스피 8천, 그리고 세계 평화입니다.😎

 

 

Q. 마지막으로, Frontend팀을 한 문장으로 표현한다면 어떻게 말씀하실 수 있을까요?

 

하은 Frontend팀을 한 문장으로 표현하자면, ‘디자인과 엔지니어링의 교차점에서 최고의 제품을 만드는 팀’이라고 말하고 싶습니다. Frontend는 디자인의 의도를 화면에 정확하게 구현하는 동시에, 견고한 구조와 테스트를 바탕으로 서비스의 안정성까지 함께 고민해야 하는 역할이라고 생각하는데요. 단순히 화면을 만드는 데 그치지 않고, 사용자가 신뢰할 수 있는 제품 경험까지 책임진다는 점에서 Frontend팀의 정체성을 가장 잘 보여주는 문장이라고 생각합니다.

 

---

 

이번 인터뷰를 통해 그 접점을 더 직관적이고 안정적으로 만들기 위해 Frontend 팀이 얼마나 세심하게 고민하고 있는지 살펴볼 수 있었는데요.

 

앞으로도 프론트엔드 팀은 사용자가 직접 보고 경험하는 모든 영역이 더 명확하고 편안하게 이어질 수 있도록, 보이는 화면 너머의 흐름과 완성도까지 꾸준히 다듬어가고자 합니다. 임직원 여러분께도 제품의 첫인상을 넘어, 더 나은 경험을 함께 만들어가는 팀으로 기억되면 좋겠습니다.😎

 

에이아이트릭스의 솔루션을 더 단단하게 만들어갈 Frontend 팀의 여정을 기대해 주세요.✨