본문 바로가기

Issues/frontend

 (9)
(성능 최적화) 구강 카메라 형광 이미지 캡쳐 로직 최적화 일전에 작성했던 글(참고 : (트러블슈팅) 구강 카메라 형광 이미지 촬영 신호 지연 문제 사례 해결)에서, 구강 카메라의 촬영 신호를 PC의 스페이스바 이벤트로 변환해주는 백그라운드 프로그램의 감지 주기를 조정하여 촬영 신호 지연 문제를 해결한 경험이 있었습니다. 그 결과, 촬영 버튼을 누르면 브라우저에서 정확하게 2장의 이미지가 1초 간격으로 캡쳐되는 성능 개선을 이루었습니다. 하지만 이번에는 저사양 PC 환경에서 브라우저의 성능 저하 문제가 발생하였고, 촬영 신호가 정확하게 스페이스바 이벤트로 전달되더라도 브라우저 성능 문제나 JavaScript의 싱글 스레드 한계로 인해 1초 간격으로 정확히 두 장의 이미지를 캡쳐하지 못하는 상황이 생겼습니다. 이러한 문제는 진료 현장, 특히 치과 위생사분들에게는 ..
(성능 최적화) 병원 진료용 저사양 PC 캡쳐 이미지 목록 렌더링 최적화 이 글에서는 오래된 병원의 저사양 PC에서 발생한 성능 문제를 어떻게 접근하고 최적화했는지, 그리고 그 과정에서 얻은 기술적 통찰과 교훈을 공유하고자 합니다. 1. 오래된 병원의 저사양 PC 문제최근 당사와 연계된 병원 한 곳의 시스템을 점검할 기회가 있었습니다. 특히 오래된 병원에서는 IT 인프라가 낙후되어, 성능이 매우 낮은 PC를 여전히 사용하는 경우가 많았습니다. 이런 저사양 환경은 우리가 제공하는 촬영 모듈의 성능에 직접적인 영향을 주었고, 사용성에도 큰 지장을 초래하고 있었습니다. ### 병원 PC 스펙 현황PCOSCPURAM실 RAMbit4번 체어윈도우 10 Home인텔 펜티엄(R) 4.10GHz, 2코어, 4논리o" style="width: 5.93023%; text-align: cente..
(디자인 시스템) Storybook 과 TailwindCSS 디자인 시스템 구축 최근 개발팀의 인원이 증가하고, 버전 관리가 복잡해짐에 따라 프론트엔드 개발에서 공통적인 요소를 사전에 정의하고 활용하는 필요성이 더욱 커졌습니다. 현재 프론트엔드 개발자는 총 5명, 백엔드 개발자는 3명으로 구성되어 있으며, 여러 버전을 동시에 개발해야 하는 상황에서 효율적인 협업과 일관성 유지가 중요한 과제로 대두되었습니다. 이러한 필요성을 해결하기 위해 디자인팀과의 협의를 통해 디자인 시스템을 도입하기로 결정했습니다. 처음에는 디자인 시스템에 디자인 토큰 개념까지 적용해 프로젝트에 사용하고자 했으나, 초기 도입 시점에서는 예상보다 큰 실익을 얻지 못한다고 판단했습니다. 대신 TailwindCSS를 기반으로 한 Storybook을 설정하여 가장 작은 단위의 요소를 공통으로 정의하고, 점진적으로 디자인..
(UI / UX) 구강 카메라 스트림 상태 체크로 사용자 경험 개선 현재 재직 중인 회사는 바이오 형광 이미징 기술을 활용한 구강 카메라를 생산하며, 이를 치과 병·의원 등을 대상으로 판매하는 기업입니다.  개발 중인 웹 기반 구강 건강 관리 플랫폼인 **링크덴스(Linkdens)**는 치아 사진 촬영, 치아 건강 분석, 진료 이력 확인, 환자에게 진료 정보를 전송할 수 있는 클라우드 기반 서비스형 소프트웨어(SaaS)입니다.  (참고자료 : LINKDENS&캠프로 사용법 안내 영상) 링크덴스는 구강 카메라의 미국 시장 진출을 위해 미국판 버전을 준비하고 있습니다. 이 과정에서 개발팀은 기존 제품의 몇 가지 핵심적인 문제점을 개선하고자 했습니다. 특히 카메라 연결이 끊어질 때 발생하는 사용자 경험의 저하 문제는 긴급하게 해결해야 할 과제였습니다. 1. 문제의 본질 구강 ..
(상태 관리) createSlice, useDispatch로 상태관리 한번 더 최적화 앞선 프로젝트 회고에서 useState를 useReducer로 최적화하는 방법에 대하여 살펴보았습니다.  "회사 프로젝트 후기 - (5) useReducer로 상태관리 최적화" 회사 프로젝트 후기 - (5) useReducer로 상태관리 최적화5월부터 참여하고 있는 프로젝트는 S 보험사에 납품되는 C/S Application의 커스터마이징 작업을 수행하는 프로젝트입니다. 그러나 어제 대상포진 발생으로 인해 긴급 휴가를 내야 했습니다. 오늘은jobcoding.tistory.com앞선 글에서 언급된 방법은 몇 가지 문제점을 가지고 있습니다. 첫째로, 리듀서 함수와 액션 생성자 함수를 개별적으로 관리해야 합니다. 이는 코드를 여러 곳에 분산시켜 유지보수를 어렵게 만들 수 있습니다. 둘째로, 액션 함수를 사용할..
(상태 관리) useReducer로 상태관리 최적화 5월부터 참여하고 있는 프로젝트는 S 보험사에 납품되는 C/S Application의 커스터마이징 작업을 수행하는 프로젝트입니다. 그러나 어제 대상포진 발생으로 인해 긴급 휴가를 내야 했습니다. 오늘은 휴가를 내고 병원에 가서 치료를 받으며, 일보의 후퇴의 마음으로 이번 기회에 '계약서 관리 시스템' 프로젝트 코드를 회고하는 시간을 가지려고 합니다. 저는 지금까지의 저의 블로그를 통해 '계약서 관리 시스템' 의 프론트엔드 개발자로서 사용성 관점에서 UI 개선 작업에 대한 회고를 작성했습니다. 이번에는 코드적인 리뷰를 통해 개선해본 사항들을 정리하고자 합니다. 특히, 이번 주제에서는 useReducer를 활용한 깔끔한 상태 관리 방법에 대해 다루어 보려고 합니다. 이는 계속해서 하게 될 프로젝트의 효율성을..
(UI / UX) 사용성 관점에서 UI_검색 근황지난 주에는 고객사로부터 추가 개발 요구사항을 접수하여 작업을 진행하고 완료하였습니다. 해당 요구사항에 대한 개발 결과를 문서화하여 요약된 보고서를 작성하고 이를 이해 관계자들과 공유하였습니다.   현재 저희 회사는 상장을 위해 C/S 기반의 자바 솔루션인 캐시카우 영역에 주력을 하고 있어 웹 개발에 집중하는 것이 일시적으로 어려운 상황입니다. 그러나 제가 프론트엔드 개발자로서 기술적으로 기여할 수 있는 부분에 최선을 다하고 있습니다. 평소에 사용성과 비즈니스 가치를 중요시하는 프론트엔드 개발자로서의 자세를 가지고 일하고 있습니다. 아직까지는 특정한 도메인에 종속되지 않고 다양한 웹 프론트엔드 개발 역량을 키우고자 하며, 사용자 인터페이스 개발, 사용자 경험 개선, 웹 성능 최적화, 반응형 디자인, ..
(UI / UX) 사용성 관점에서 UI_계약서_추가 지난 2월에 이직하여 웹 서비스 팀에서 "계약서 관리 시스템" 프로젝트에 프론트엔드 개발자로 참여하게 되었습니다. 이 프로젝트는 React와 Node.js를 기반으로 개발되었으며, 서명이 날인된 계약서를 전자적으로 관리하는 시스템입니다. PDF 파일의 계약서를 시스템에 업로드하면 OCR 기술을 이용하여 계약서의 텍스트를 추출하고, 검색 엔진을 추가하여 문서명과 본문 검색이 가능합니다. 또한, 등록된 계약서의 계약일, 계약 기간, 결제일 등과 같은 중요한 일정을 캘린더로 제공합니다.  현재 새롭게 시작된 새로운 프로젝트에 참여하고 있지만, 지난 프로젝트 '계약서 관리 시스템'을 만들기 위해 보낸 그간의 시간들을 정리하고 프로젝트를 회고하는 기간을 개인적으로 가지고 있습니다. 다소간의 주절거림이 있을 수 있..

티스토리툴바