포트폴리오

이번 프로젝트는 오픈후르츠가 진행한 돌봄나라 하이브리드앱 개발 프로젝트로, 웹사이트와 모바일앱을 하나의 코드베이스로 운영하는 웹앱 통합 구축 사례입니다.

플랫폼은 반응형웹 기반의 WebView 하이브리드 구조(Cordova) 로 개발되었으며,
사용자 접근성을 극대화하기 위해 SEO 최적화, UI/UX 설계, API 연동 등 웹과 앱의 장점을 통합한 형태로 구현되었습니다.

1. 기획 및 설계
- 초기 기획 단계에서는 사용자 유형(돌봄 인재, 기관 관리자, 운영자)을 구분하여 UX 설계와 정보구조(IA) 를 세밀히 설계했습니다.
- 모바일 중심 흐름(회원가입 → 프로필 등록 → 공고 조회 → 상담 요청)을 기준으로, cross platform 환경에서도 동일한 사용자 경험을 제공할 수 있도록 구조화했습니다.
- 모든 데이터는 단일 DB에서 관리되며, RESTful API 로 웹·앱 간 데이터를 동기화했습니다.

2. 디자인 시스템
- 디자인은 “따뜻함, 신뢰, 간결함”을 키워드로 잡아
- UI/UX 일관성과 반응형웹 가독성을 동시에 확보했습니다.
- 폰트 시스템: Noto Sans KR + Pretendard
- 레이아웃: CSS Grid와 Flexbox를 활용한 Front-End 퍼포먼스 최적화
- 컬러톤: 화이트 기반의 심플하고 전문적인 조합
- 또한 웹과 앱이 동일한 사용자 인터페이스를 유지하도록 하이브리드앱 WebView 구조를 적용하여 관리 효율성을 높였습니다.

3. 구현 특징
- 하이브리드앱 개발 구조를 통해 웹뷰(WebView) 와 네이티브 기능(푸시, 카메라, 파일 접근 등)을 연결
- 반응형웹 기반으로 모든 디바이스에서 자동 리사이징
- SEO 최적화 구조화 데이터(JSON-LD), robots.txt, sitemap.xml 자동 생성
- API 연동형 관리자 시스템으로 웹·앱 통합 운영
- Front-End 성능 개선: Lazy Loading, CSS 캐싱 버전관리(?ver=1.0.3)

4. 운영 및 유지보수
- 웹관리자시스템(CMS)을 통해 공고·회원·상담·푸시 알림을 통합 관리하며,
- 앱과 웹은 동일한 데이터를 실시간으로 반영합니다.
- IIS 기반 보안 세션관리와 SSL 인증을 적용해
- 데이터 보안과 개인정보 보호 수준을 강화했습니다.
- 또한 카카오 알림톡 API 연동으로 상담 요청 시 실시간 알림이 전송되며, Google Analytics를 통한 UX 행동 데이터 분석 기능이 포함되어 있습니다.

돌봄나라 관리자

5. 기술적 하이라이트
- Cordova + WebView 기반의 하이브리드앱 개발 기술 적용
- cross platform 구조를 통한 Android / iOS 동시 지원
- 푸시 알림 및 앱 자동 로그인 기능 내장
- Front-End 퍼포먼스 최적화와 SEO 구조 설계를 동시에 달성한 통합형 웹서비스

웹에이전시 포트폴리오로서, 돌봄나라 프로젝트는 향후 PWA 전환 및 AI 매칭 알고리즘 확장을 위한 기반 기술까지 확보한 완성도 높은 구축 사례입니다. 감사합니다.