안녕하세요, 이상혁입니다

AI를 활용해 하드웨어, 백엔드, 데이터 등 낯선 분야를 빠르게 학습하며 다양한 자동화 시스템을 구축했지만, 정작 내 머릿속에 남는 경험치는 점점 줄어들고 있다는 사실을 깨달았습니다. AI가 제공하는 속도와 편리함을 누리면서도 진짜 실력을 쌓기 위해, 모르기 때문에 배우는 과정 자체를 기록하는 '몰라서 배웠습니다' 시리즈를 시작합니다.

사내 전자동의서 에디터의 불편한 사용성 문제를 해결하기 위해 MCP(Model Context Protocol)를 도입해 Claude Desktop과 연동한 결과, 기존에 별도 UI 개발이 필요했던 목록 조회, 검색, 분석 기능들을 대화만으로 처리할 수 있게 되어 서비스 기능이 자연스럽게 확대되는 효과를 얻었지만, LLM이 의도한 방향으로 정확히 동작하게 하려면 아직 상세한 가이드가 필요한 상황이다.

Modal과 Drawer 컴포넌트는 전통적으로 루트에 두고 전역 상태로 제어했지만, 스타일링 문제(z-index 등)가 있었습니다. React의 Portal을 활용하면 부모 DOM 계층을 벗어나 원하는 위치에 컴포넌트를 쉽게 렌더링할 수 있어 이런 문제를 해결할 수 있습니다. 실제 프로젝트에서 Portal을 이용해 Drawer를 구현하니 추가 CSS 없이도 원하는 UI를 손쉽게 만들 수 있습니다.