본문 바로가기

전체 글

 (133)
(성능 최적화) 구강 카메라 형광 이미지 캡쳐 로직 최적화 일전에 작성했던 글(참고 : (트러블슈팅) 구강 카메라 형광 이미지 촬영 신호 지연 문제 사례 해결)에서, 구강 카메라의 촬영 신호를 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..
(트러블 슈팅) 구강 카메라 형광 이미지 촬영 신호 지연 문제 해결 사례 문제 개요 :형광 이미지 촬영 신호 지연 문제회사가 생산 및 판매하는 구강 카메라는 일반 사진뿐만 아니라 바이오 형광 이미지를 촬영할 수 있는 정밀 의료 장비입니다. 하지만 형광 이미지 촬영 시 촬영 신호가 지연되거나 누락되는 문제가 빈번하게 발생해 사용자의 촬영 경험이 불안정했고, 이는 제품의 신뢰성을 떨어뜨리는 요인이 되었습니다.  플랫폼 개발팀은 하드웨어 개발을 직접 담당하지 않지만, 플랫폼의 사용성이 구강 카메라의 성능에 크게 의존하고 있었기 때문에 이 문제를 해결하는 것이 필수적이라고 판단했습니다. 안정적이고 효율적인 사용자 경험을 위해 촬영 버튼의 입력을 신속하고 정확하게 감지하는 것이 필요했습니다.문제 원인: 신호 감지 주기의 불안정성 구강 카메라는 단일 촬영 버튼 클릭 시 1초 후 형광 이..
(트러블 슈팅) Next.js 14 와 Storybook 에서 TailwindCSS 호환 이슈 Next.js 14와 Storybook에서 TailwindCSS를 함께 사용하기 위한 호환성 문제 및 해결 방법(추가 2024. 10) 2024년 10월 기준으로 Next.js 14.2.15, Storybook 9.3.5, TailwindCSS 3.4.14 조합에서는 TailwindCSS가 정상적으로 동작하는 것이 확인되었습니다. 이로써 최신 Storybook에서의 호환성 문제를 해결하고, TailwindCSS를 활용한 디자인 시스템 구축이 원활히 이루어질 수 있습니다. 개발자들에게는 버전 호환성을 주의 깊게 확인하는 것이 중요하며, 최신 버전의 안정성을 보장받기 전까지는 이전 버전을 사용하는 것이 안정적일 수 있습니다. (추가 2024. 07) Storybook 최신 버전 8을 TailiwdCSS와 연..
(디자인 시스템) Storybook 과 TailwindCSS 디자인 시스템 구축 최근 개발팀의 인원이 증가하고, 버전 관리가 복잡해짐에 따라 프론트엔드 개발에서 공통적인 요소를 사전에 정의하고 활용하는 필요성이 더욱 커졌습니다. 현재 프론트엔드 개발자는 총 5명, 백엔드 개발자는 3명으로 구성되어 있으며, 여러 버전을 동시에 개발해야 하는 상황에서 효율적인 협업과 일관성 유지가 중요한 과제로 대두되었습니다. 이러한 필요성을 해결하기 위해 디자인팀과의 협의를 통해 디자인 시스템을 도입하기로 결정했습니다. 처음에는 디자인 시스템에 디자인 토큰 개념까지 적용해 프로젝트에 사용하고자 했으나, 초기 도입 시점에서는 예상보다 큰 실익을 얻지 못한다고 판단했습니다. 대신 TailwindCSS를 기반으로 한 Storybook을 설정하여 가장 작은 단위의 요소를 공통으로 정의하고, 점진적으로 디자인..
(UI / UX) 구강 카메라 스트림 상태 체크로 사용자 경험 개선 현재 재직 중인 회사는 바이오 형광 이미징 기술을 활용한 구강 카메라를 생산하며, 이를 치과 병·의원 등을 대상으로 판매하는 기업입니다.  개발 중인 웹 기반 구강 건강 관리 플랫폼인 **링크덴스(Linkdens)**는 치아 사진 촬영, 치아 건강 분석, 진료 이력 확인, 환자에게 진료 정보를 전송할 수 있는 클라우드 기반 서비스형 소프트웨어(SaaS)입니다.  (참고자료 : LINKDENS&캠프로 사용법 안내 영상) 링크덴스는 구강 카메라의 미국 시장 진출을 위해 미국판 버전을 준비하고 있습니다. 이 과정에서 개발팀은 기존 제품의 몇 가지 핵심적인 문제점을 개선하고자 했습니다. 특히 카메라 연결이 끊어질 때 발생하는 사용자 경험의 저하 문제는 긴급하게 해결해야 할 과제였습니다. 1. 문제의 본질 구강 ..
(React) 전역 상태 공유 : React Context API 심층 분석 (핵심 요약) React Context API 종합 평가SPA(Single Page Application) 개발에서 props drilling을 피하고 전역 상태를 관리하는 것은 중요한 과제입니다. 다양한 상태 관리 라이브러리들이 존재하는 가운데, 저는 Redux Toolkit, Zustand, Recoil, Reactive Variable 등 여러 상태 관리 도구들을 사용해본 경험을 토대로 Context API가 특히 단순하고 직관적인 상태 공유가 필요한 경우 매우 효과적임을 확인했습니다. Context API는 복잡한 store 기반 상태 관리에서 벗어나, 모듈화된 컴포넌트들 간에 상태를 쉽게 공유할 수 있는 점에서 큰 장점이 있습니다. 특히, 특정 기능을 수행하는 컴포넌트 그룹을 하나의 Contex..
(배포 환경) nCloud 백엔드 시스템 구축 과정: Node, MySQL, Nginx 개요최근 네이버 클라우드를 기반으로 백엔드 시스템을 구축하면서, Node.js, MySQL, Nginx 등을 설치하고 구성하는 과정을 정리했습니다. 이 글에서 다룰 내용은 백엔드 개발자라면 누구나 쉽게 따라할 수 있는 기본적인 설정들입니다. 이 프로젝트는 외주 요청을 받아 풀스택으로 직접 구축한 것으로, 배포 환경 최적화와 비용 효율성을 고려해 설계되었습니다. 다만, 여기서 다룬 설정은 기본적인 작업들이며, 백엔드 시스템을 구축하는 데 있어 필수적인 기초 작업들입니다. 이번 작업의 주요 목표는 서비스의 안정성과 시스템 효율성을 확보하는 것이었습니다. 이 글에서는 서버 초기 설정, 데이터베이스 설치, 리버스 프록시 설정 등 주요 단계를 기술적으로 다뤄보겠습니다. nCloud 초기 설정네이버 클라우드에서는..

티스토리툴바