프로젝트 배경
1) 프로젝트 개요
본 프로젝트는 아이오바이오(AIOBIO)의 AI 기반 구강케어 서비스 ‘LINKDENS(링크덴스)’ 초기 MVP 단계 개발로,
병원용 웹 애플리케이션의 구조 설계 및 핵심 기능 구현을 담당했습니다.
링크덴스는 치과 진료 장비에서 얻은 형광 이미지를 AI로 분석해
환자의 구강 상태를 시각적으로 관리할 수 있도록 하는 병원 중심 플랫폼입니다.
2) 참여 배경 및 역할
서비스 초기 단계에서 기획이 빠르게 업데이트되는 환경 속에서,
테크리더로서 전체 프론트엔드 구조를 설계하고 주요 기능을 구현했습니다.
기획안이 확정될 때마다 즉시 개발을 진행하고 피드백을 반영해야 했기 때문에,
유연한 구조 설계와 빠른 프로토타이핑 능력이 중요했습니다.
React 기반 환경에서 컴포넌트 단위의 설계를 적용하고,
변경이 잦은 화면과 로직을 효율적으로 관리할 수 있도록 구조를 개선했습니다.
3) 프로젝트 목적
초기 MVP를 통해 핵심 기능의 검증 및 서비스 방향성 확립을 목표로 했으며,
이후 정식 버전 개발을 위한 기술적 기반을 마련하는 데 집중했습니다.
이를 통해 의료진이 환자 데이터를 직관적으로 확인할 수 있는 인터페이스를 구현하고,
향후 전자차트 연동과 AI 분석 기능 고도화를 위한 안정적인 구조를 확보했습니다.
본 프로젝트는 아이오바이오(AIOBIO)의 AI 기반 구강케어 서비스 ‘LINKDENS(링크덴스)’ 초기 MVP 단계 개발로,
병원용 웹 애플리케이션의 구조 설계 및 핵심 기능 구현을 담당했습니다.
링크덴스는 치과 진료 장비에서 얻은 형광 이미지를 AI로 분석해
환자의 구강 상태를 시각적으로 관리할 수 있도록 하는 병원 중심 플랫폼입니다.
2) 참여 배경 및 역할
서비스 초기 단계에서 기획이 빠르게 업데이트되는 환경 속에서,
테크리더로서 전체 프론트엔드 구조를 설계하고 주요 기능을 구현했습니다.
기획안이 확정될 때마다 즉시 개발을 진행하고 피드백을 반영해야 했기 때문에,
유연한 구조 설계와 빠른 프로토타이핑 능력이 중요했습니다.
React 기반 환경에서 컴포넌트 단위의 설계를 적용하고,
변경이 잦은 화면과 로직을 효율적으로 관리할 수 있도록 구조를 개선했습니다.
3) 프로젝트 목적
초기 MVP를 통해 핵심 기능의 검증 및 서비스 방향성 확립을 목표로 했으며,
이후 정식 버전 개발을 위한 기술적 기반을 마련하는 데 집중했습니다.
이를 통해 의료진이 환자 데이터를 직관적으로 확인할 수 있는 인터페이스를 구현하고,
향후 전자차트 연동과 AI 분석 기능 고도화를 위한 안정적인 구조를 확보했습니다.
프로젝트 성과
안정적인 MVP 개발 및 출시 일정 준수
기획 변경이 잦은 환경에서도 유연한 구조 설계와 빠른 피드백 반영을 통해 초기 MVP를 안정적으로 구현했습니다. 예정된 일정 내 주요 기능을 모두 완료하며, 정식 서비스 전환을 위한 검증 단계까지 마무리했습니다.
유지보수성과 확장성을 고려한 프론트엔드 구조 확립
React 기반의 컴포넌트 구조를 재설계하여 코드 복잡도를 낮추고, 기능 추가 및 유지보수 시 효율성을 크게 개선했습니다.
핵심 기능
엑스레이 이미지 시각화 및 영역 선택 기능
치아 엑스레이 이미지 상에서 특정 부위를 클릭·선택할 수 있도록 구현하여,
의료진이 환자의 구강 상태를 직관적으로 확인하고 진료에 활용할 수 있도록 함.
의료진이 환자의 구강 상태를 직관적으로 확인하고 진료에 활용할 수 있도록 함.
치아 번호별 상태 입력 및 수정 기능
선택된 치아 영역의 상태를 입력·저장할 수 있는 UI를 구현하고,
실시간 반영 구조를 통해 데이터 입력 및 검증 효율을 높임.
실시간 반영 구조를 통해 데이터 입력 및 검증 효율을 높임.
실시간 상태 반영을 위한 React Hook 기반 데이터 관리
React Hook을 활용해 환자 상태 변경사항이 즉시 화면에 반영되도록 구조 설계.
렌더링 성능을 개선하고 유지보수성을 강화함.
렌더링 성능을 개선하고 유지보수성을 강화함.
컴포넌트 기반 화면 구조 설계 및 재사용성 확보
MVP 단계에서 잦은 기획 변경에 대응하기 위해 컴포넌트 단위로 화면을 설계하여
재사용 가능한 구조를 확보하고 개발 속도와 안정성을 모두 향상시킴.
재사용 가능한 구조를 확보하고 개발 속도와 안정성을 모두 향상시킴.
진행 단계
기획
2022.03.
서비스 초기 구상 단계에서 MVP 목표와 핵심 기능을 정의했습니다.
기획 변경이 잦은 환경에서 주요 기능의 우선순위를 조정하며 전체 일정에 맞게 진행했습니다.
기획 변경이 잦은 환경에서 주요 기능의 우선순위를 조정하며 전체 일정에 맞게 진행했습니다.
설계 및 구조 구축
2022.04.
React 기반 프론트엔드 구조를 설계하고, 컴포넌트 단위 아키텍처를 확립했습니다.
기획이 변경될 때마다 빠르게 대응할 수 있도록 유연한 구조를 마련했습니다.
기획이 변경될 때마다 빠르게 대응할 수 있도록 유연한 구조를 마련했습니다.
개발
2022.05.
병원용 관리 화면, 엑스레이 시각화 기능, 상태 입력 UI 등 핵심 기능을 구현했습니다.
의료진 중심의 사용 흐름을 고려해 폼 구조와 데이터 반영 방식을 개선했습니다.
의료진 중심의 사용 흐름을 고려해 폼 구조와 데이터 반영 방식을 개선했습니다.
테스트 및 피드백 반영
2022.09.
내부 QA 및 의료진 피드백을 반영하여 UI/UX를 개선했습니다.
기능별 성능 점검과 오류 수정 작업을 반복하며 안정적인 MVP 버전을 확보했습니다.
기능별 성능 점검과 오류 수정 작업을 반복하며 안정적인 MVP 버전을 확보했습니다.
프로젝트 상세
1) 포트폴리오 소개
본 프로젝트는 아이오바이오(AIOBIO)의 AI 기반 구강케어 서비스 ‘LINKDENS(링크덴스)’의
초기 MVP 개발 단계에서 진행된 병원용 웹 애플리케이션 구축 프로젝트입니다.
ReactJS 기반으로 프론트엔드 구조를 설계하고, 주요 기능을 빠르게 구현하여
서비스의 핵심 기능 검증과 정식 버전 개발을 위한 기술적 기반을 마련했습니다.
2) 작업 범위
· ReactJS 기반 병원용 웹 애플리케이션 프론트엔드 개발
· 엑스레이 이미지 및 치아 상태 데이터 관리 기능 구현
· 실시간 상태 반영 구조 설계 및 폼 유효성 검증 추가
· 반복되는 기획 변경에 대응하기 위한 컴포넌트 단위 구조 설계
· 초기 MVP 환경 구축 및 프로토타이핑 지원
3) 주요 업무
· 치과 엑스레이 이미지 상에서 특정 치아 영역을 선택·표시할 수 있는 기능 구현
· 선택된 치아 번호별 상태를 입력 및 수정할 수 있는 UI/UX 개선
· React Hook 기반 상태 관리로 데이터 변경 시 실시간 반영 구조 설계
· 의료진의 데이터 입력 효율성을 높이기 위한 폼 구조 개선 및 유효성 검증 추가
· 기존 코드의 렌더링 성능을 개선하고, 유지보수성을 높이기 위한 컴포넌트 분리 작업 진행
4) 주안점
· MVP 단계에서 빠른 피드백 반영과 기능 검증에 중점을 둠
· 구조적 유연성과 유지보수성을 모두 확보한 설계
· 의료진이 환자 데이터를 직관적으로 다룰 수 있는 UX 구현
· 향후 전자차트 및 AI 분석 기능 확장을 고려한 코드 아키텍처 구성
본 프로젝트는 아이오바이오(AIOBIO)의 AI 기반 구강케어 서비스 ‘LINKDENS(링크덴스)’의
초기 MVP 개발 단계에서 진행된 병원용 웹 애플리케이션 구축 프로젝트입니다.
ReactJS 기반으로 프론트엔드 구조를 설계하고, 주요 기능을 빠르게 구현하여
서비스의 핵심 기능 검증과 정식 버전 개발을 위한 기술적 기반을 마련했습니다.
2) 작업 범위
· ReactJS 기반 병원용 웹 애플리케이션 프론트엔드 개발
· 엑스레이 이미지 및 치아 상태 데이터 관리 기능 구현
· 실시간 상태 반영 구조 설계 및 폼 유효성 검증 추가
· 반복되는 기획 변경에 대응하기 위한 컴포넌트 단위 구조 설계
· 초기 MVP 환경 구축 및 프로토타이핑 지원
3) 주요 업무
· 치과 엑스레이 이미지 상에서 특정 치아 영역을 선택·표시할 수 있는 기능 구현
· 선택된 치아 번호별 상태를 입력 및 수정할 수 있는 UI/UX 개선
· React Hook 기반 상태 관리로 데이터 변경 시 실시간 반영 구조 설계
· 의료진의 데이터 입력 효율성을 높이기 위한 폼 구조 개선 및 유효성 검증 추가
· 기존 코드의 렌더링 성능을 개선하고, 유지보수성을 높이기 위한 컴포넌트 분리 작업 진행
4) 주안점
· MVP 단계에서 빠른 피드백 반영과 기능 검증에 중점을 둠
· 구조적 유연성과 유지보수성을 모두 확보한 설계
· 의료진이 환자 데이터를 직관적으로 다룰 수 있는 UX 구현
· 향후 전자차트 및 AI 분석 기능 확장을 고려한 코드 아키텍처 구성

환자별 진료 요약 및 기본 정보를 한눈에 확인할 수 있는 관리 화면입니다. 의료진이 환자 데이터를 효율적으로 관리할 수 있도록 구성했습니다.

치아 엑스레이 이미지 상에서 특정 치아 영역을 선택·표시할 수 있는 기능 화면입니다. 선택된 부위의 상태를 직관적으로 확인할 수 있습니다.

치아 번호별 상태를 입력하고 수정할 수 있는 기능 화면입니다. 의료진이 각 치아의 상태를 빠르고 정확하게 기록할 수 있도록 설계했습니다.




