포트폴리오 | 오드오드 아하!오팀

메뉴 바로가기 본문 바로가기

오드오드는

다양한 산업 분야의 클라이언트와 함께했습니다.

한화비전 HealthPro 대시보드
hanui.io KRDS UI 라이브러리
삼성선물 Open API
LS증권 롱숏클럽
한국ST거래(주) 거래시스템
dktechin a kakao company
한국전자인증 웹접근성 인증
용인특례시 교통약자 이동지원
환경부 환경지킴이 시스템
서울특별시 뉴딜일자리 교육

Projects

클라이언트: 한화비전
프로젝트 유형: 프론트엔드 운영 / 유지보수 (CCTV 상태 관제 대시보드)
진행 기간: 2026년 1월 ~ 운영중
기술 스택: React, TypeScript, Next.js
웹 접근성: 접근성 준수 안내 (한화비전 공식)

프로젝트 소개

HealthPro: 한화비전 CCTV 장비의 상태를 실시간으로 모니터링하는 관제 대시보드
프론트엔드 운영: 서비스 중인 프론트엔드의 지속적인 유지보수와 기능 개선을 담당

주요 업무

운영 & 유지보수

기존 프론트엔드 유지보수 및 기능 개선
레거시 코드 마이그레이션

품질 & 성능

UI 개발 및 성능 최적화
웹 접근성 대응: VPAT(Voluntary Product Accessibility Template) 작성으로 접근성 준수 수준 문서화 및 대응 — 공식 안내 문서에 게시
보안 강화: Content Security Policy(CSP) 설정 — 리소스 소스 화이트리스트로 XSS 및 인젝션 공격 방어

협업 & 생산성

AI 활용 연계 작업
개발 가이드 문서화

프로젝트 유형: 오픈소스 UI 컴포넌트 라이브러리
진행 기간: 2025년 9월 ~ 12월
기술 스택: React, TypeScript, Storybook, Vite, SCSS, WCAG 2.1, KRDS
라이선스: MIT License
사이트: hanui.io
저장소: GitHub
패키지: npm

프로젝트 소개

KRDS 준수: 대한민국 정부 디자인 시스템(Korea Republic Design System) 완벽 준수
접근성 인증: WCAG 2.1 AA 등급 준수, 스크린리더 및 키보드 네비게이션 완벽 지원
프레임워크 호환: eGovFrame 5.0 및 Next.js 14 공식 지원
50+ 컴포넌트: Button, Input, Modal, Table, DatePicker 등 실무에 필요한 모든 컴포넌트 제공

주요 특징

정부 표준 디자인 시스템

행정안전부 KRDS 가이드라인 100% 준수
공공기관 웹사이트 구축 시 즉시 적용 가능
디자인 토큰 기반 테마 시스템으로 커스터마이징 용이

개발자 경험 (DX)

TypeScript 기반 완벽한 타입 정의 및 자동완성 지원
Storybook 문서화: 모든 컴포넌트 인터랙티브 데모 제공
Tree-shaking 지원으로 번들 사이즈 최적화
npm/yarn 패키지 배포 및 CDN 지원

접근성 (A11y)

WAI-ARIA 패턴 적용: 모든 인터랙티브 컴포넌트
키보드 네비게이션: Tab, Arrow, Enter, Escape 완벽 지원
포커스 관리: Modal, Dropdown 등 포커스 트랩 구현
색상 대비 4.5:1 이상 보장, 고대비 모드 지원

컴포넌트 구성

기본 UI: Button, Input, Checkbox, Radio, Select, Switch, Slider
레이아웃: Grid, Stack, Container, Card, Divider
네비게이션: Tabs, Breadcrumb, Pagination, Menu, Sidebar
피드백: Modal, Toast, Alert, Progress, Skeleton
데이터: Table, DataGrid, Tree, Accordion, Timeline
입력: DatePicker, TimePicker, FileUpload, Editor

hanui.io 메인 페이지 - KRDS 기반 React 컴포넌트 라이브러리

hanui.io 컴포넌트 문서 - Header 컴포넌트 상세

클라이언트: 네오프레임
프로젝트 유형: 신규 구축 (Open API 포털 + 어드민 시스템)
진행 기간: 2025년 4월 ~ 9월
기술 스택: Vue3, Nuxt, Pinia, Vite, RESTful API, TailwindCSS, Figma
사이트: openapi.ssfutures.com

오드오드의 역할

기획 보완: API 문서 포털의 사용자 흐름 재정비, 개발자 경험(DX) 중심 정보 구조 최적화
UI/UX 디자인: API 문서 레이아웃, 테스트 콘솔 UI, 디자인 시스템 구축
프론트엔드 개발: Open API 개발자센터 포털 전체 구현, API 문서 자동화, 테스트 콘솔 개발

주요 수행 내용

기획 및 UX 설계

API 문서 탐색 흐름 최적화: 카테고리 → API 목록 → 상세 문서 → 테스트
개발자 경험(DX) 중심 설계: 빠른 검색, 코드 복사, 즐겨찾기 기능
다크모드, 키보드 탐색, 접근성 설계 포함

UI 디자인

3단 레이아웃 구조: 좌측 메뉴 + 본문 + 우측 TOC
API 테스트 콘솔 UI: Request/Response 패널, 파라미터 입력 폼
코드 하이라이팅 및 복사 버튼 UX 설계

프론트엔드 개발

Open API 개발자센터 포털 전체 프론트엔드 구현 (Public/Admin)
API 문서 자동화 시스템: Swagger/OpenAPI 스펙 기반 동적 문서 렌더링
인터랙티브 API 테스트 콘솔: 실시간 요청/응답 시뮬레이션, 파라미터 자동완성
코드 스니펫 생성기: Python, Java, JavaScript 등 다국어 샘플 코드 제공
API 버전 관리 및 그룹별 필터링, 검색 시스템 구현
좌측 네비게이션 + 우측 TOC 연동 스크롤 동기화
다크모드, 반응형 레이아웃, 키보드 접근성 지원
보안 강화: Content Security Policy(CSP) 설정 — 스크립트·스타일·이미지 등 리소스 소스 화이트리스트로 XSS 및 인젝션 공격 방어

삼성선물 Open API 메인화면

삼성선물 Open API 문서화면

클라이언트: 이노솔트
프로젝트 유형: 선물옵션 커뮤니티 웹사이트 신규 구축
진행 기간: 2024년 8월 ~ 12월
기술 스택: Next.js, TypeScript, TailwindCSS, Redux Toolkit, RESTful API, Figma

오드오드의 역할

기획 보완: 선물옵션 투자 커뮤니티 정보 구조 설계, 수익 인증 시스템 기획
UI/UX 디자인: 피드형 커뮤니티 UI, 수익 인증 플로우, 반응형 설계
프론트엔드 개발: Next.js 기반 풀스택 개발, 실시간 피드, 인증 시스템 구현

주요 수행 내용

기획 및 UX 설계

선물옵션 트레이더 타겟 커뮤니티 정보 구조 설계
수익 인증 시스템: 증권사 캡처 → OCR 인식 → 인증 배지 발급 플로우
실시간 인기글, 최신글, 인증글 피드 UX 설계

UI 디자인

증권사 컬러 기반 브랜드 아이덴티티 적용
실시간 피드형 카드 UI 및 인증 배지 시스템 디자인
마이페이지: 수익 통계, 인증 이력, 팔로우 관리

프론트엔드 개발

Next.js 14 + TypeScript 기반 SSR/CSR 하이브리드 구조 개발
실시간 게시글 피드: Polling 기반 자동 새로고침, 무한 스크롤
수익 인증 시스템: 이미지 업로드, OCR 연동, 인증 배지 UI
Redux Toolkit + RTK Query로 서버 상태 캐싱 및 동기화
소셜 로그인 연동 (카카오, 네이버) 및 JWT 인증 처리
TailwindCSS 기반 반응형 UI 및 재사용 컴포넌트 라이브러리

LS증권 롱숏클럽 메인화면

LS증권 롱숏클럽 상세화면

클라이언트: 이노솔트
프로젝트 유형: 실시간 ST 거래시스템 웹사이트 신규 구축
진행 기간: 2024년 2월 ~ 5월
기술 스택: React, TypeScript, WebSocket, TailwindCSS, Redux Toolkit, RESTful API, Figma

오드오드의 역할

기획 보완: 실시간 ST(Security Token) 거래 플랫폼 UX 설계, 주문 플로우 최적화
UI/UX 디자인 전반: 트레이딩 대시보드, 주문 UI, 실시간 데이터 시각화
프론트엔드 개발 전체: WebSocket 실시간 통신, 고성능 거래 UI 구현

주요 수행 내용

기획 및 UX 설계

실시간 호가창, 체결 내역, 잔고 정보 레이아웃 설계
퀵주문/일괄주문/예약주문 등 다양한 주문 방식 UX 기획
거래 실패 시 에러 피드백 및 복구 플로우 설계

UI 디자인

금융 거래 특성 반영한 다크/라이트 테마 시스템
실시간 데이터 스트리밍에 최적화된 테이블/차트 컴포넌트
장시간 트레이딩을 고려한 눈의 피로도 최소화 컬러 팔레트

프론트엔드 개발

WebSocket 기반 실시간 호가/체결 데이터 스트리밍 구현
고성능 주문 UI: 퀵주문, 일괄주문, 예약주문 컴포넌트
실시간 포트폴리오 대시보드: 수익률, 잔고, 미체결 현황
금융 데이터 전용 테이블/차트 컴포넌트 라이브러리 개발
Redux Toolkit으로 복잡한 거래 상태 관리 및 Optimistic Update
에러 바운더리 및 거래 실패 시 롤백 처리 시스템 구축

한국ST거래 메인화면

한국ST거래 거래화면

클라이언트: 사단법인 한국경영혁신중소기업협회
프로젝트 유형: UI/UX 디자인 & 프론트엔드 교육
진행 기간: 2024년 5월 ~ 7월
기술 스택: UI/UX 디자인, React, TypeScript

오드오드의 역할

강사: 서울시 뉴딜일자리 사업 UI/UX 디자인 및 프론트엔드 개발 교육
커리큘럼 설계: 실무 중심 교육 과정 기획 및 운영

클라이언트: 제로원
프로젝트 유형: NFT 마켓플레이스 웹사이트 신규 구축
진행 기간: 2022년 11월 ~ 2023년 10월
기술 스택: React, TypeScript, Web3.js, TailwindCSS, Redux Toolkit, IPFS, Figma

오드오드의 역할

기획 보완: NFT 마켓플레이스 거래 플로우 설계, 지갑 연동 UX 최적화
UI/UX 디자인 전반: 아트워크 중심 갤러리 UI, 거래/민팅 인터페이스 설계
프론트엔드 개발 전체: Web3 지갑 연동, 블록체인 트랜잭션 UI 구현

주요 수행 내용

기획 및 UX 설계

NFT 민팅 → 리스팅 → 거래 → 전송 전체 플로우 설계
지갑 연결, 트랜잭션 서명, 가스비 확인 UX 최적화
컬렉션/속성/가격대별 복합 필터링 시스템 기획

UI 디자인

디지털 아트 몰입감을 위한 다크 테마 + 네온 액센트
NFT 메타데이터 (속성, 희귀도, 거래이력) 카드 레이아웃
트랜잭션 진행 상태 피드백: Pending → Confirmed 애니메이션

프론트엔드 개발

Web3.js 기반 지갑 연동: MetaMask, WalletConnect 멀티월렛 지원
NFT 민팅/거래 트랜잭션 UI: 가스비 추정, 트랜잭션 상태 추적
IPFS 메타데이터 파싱 및 동적 NFT 카드 렌더링
대용량 컬렉션 처리: Virtual Scrolling, Lazy Loading 최적화
복합 필터링 시스템: 컬렉션, 가격대, 속성별 실시간 검색
블록체인 이벤트 리스닝: 거래 완료, 입찰 알림 실시간 반영

BOASpace NFT 마켓플레이스 메인화면

BOASpace NFT 상세화면

BOASpace NFT 컬렉션화면

클라이언트: 제로원
프로젝트 유형: 블록체인 메인넷 공식 웹사이트
진행 기간: 2022년 9월 ~ 11월
기술 스택: React, TypeScript, TailwindCSS, Figma

오드오드의 역할

UI/UX 디자인: 블록체인 메인넷 브랜딩, 랜딩페이지 디자인
프론트엔드 개발: 반응형 웹사이트 구현, 인터랙션 개발

BOSagora 메인 화면

BOSagora 상세 화면

프로젝트 유형: 블록체인 프로젝트 웹사이트
기술 스택: React, TypeScript, TailwindCSS

오드오드의 역할

UI/UX 디자인: Web3 브랜딩, 랜딩페이지 디자인
프론트엔드 개발: 반응형 웹사이트 구현

Cascadia 메인 화면

Cascadia 상세 화면

클라이언트: 오롯소프트
프로젝트 유형: 복무관리시스템 신규 구축
진행 기간: 2021년 6월 ~ 8월
기술 스택: React, TailwindCSS, Redux Toolkit, RESTful API, Figma

오드오드의 역할

서비스 기획: 시민 중심의 정보 구조 설계 및 사용자 여정 최적화
UI/UX 디자인 전반: 와이어프레임, 디자인 시스템, 신청 아이덴티티 구축
프론트엔드 개발 전반: 웹표준 마크업, 스타일링, 인터랙션 구현

주요 수행 내용

시스템 기획 및 UX 설계

환경지킴이 근무 패턴 분석을 통한 효율적 관리 프로세스 설계
관리자별 권한 체계 및 업무 플로우 최적화
대용량 근무 데이터 조회 및 필터링 시스템 구조 기획

UI/UX 디자인

공공기관 특성을 반영한 직관적 관리자 인터페이스 구축
복무 현황을 한눈에 파악할 수 있는 대시보드 레이아웃 설계
데이터 집약적 테이블 및 통계 차트 컴포넌트 디자인

프론트엔드 개발

React 기반 대용량 데이터 처리 관리 시스템 구현
복합 검색 필터 및 정렬 기능을 통한 데이터 탐색 최적화
가상화 스크롤링으로 대량 리스트 성능 개선
엑셀 다운로드 및 일괄 처리 기능 구현

환경부 환경지킴이 복무관리시스템 화면

클라이언트: 디플레임
프로젝트 유형: 간편청구 시스템 웹사이트
진행 기간: 2021년 10월
기술 스택: React, 고도몰, JavaScript

오드오드의 역할

프론트엔드 개발: 다중 간편청구 시스템 UI 구현

다중 간편청구 메인 화면

다중 간편청구 상세 화면

클라이언트: 수원시
프로젝트 유형: 공공기관 웹사이트

오드오드의 역할

UI/UX 디자인: 시민 친화적 인터페이스 설계
프론트엔드 개발: 웹사이트 퍼블리싱 및 접근성 구현

수원시 웹사이트 화면 1

수원시 웹사이트 화면 2

클라이언트: 한국전자인증
프로젝트 유형: 웹접근성 평가 인증
진행 기간: 2020년 11월 ~ 2021년 1월
사이트: crosscert.com

오드오드의 역할

웹접근성 컨설팅: 테이블 구조 기반 레거시 시스템 접근성 분석 및 개선
접근성 최적화: 기존 구조 유지하면서 WCAG 가이드라인 준수
인증 획득 지원: KICA 웹접근성 평가 기준 충족을 위한 세부 개선

주요 수행 내용

웹접근성 진단 및 개선

테이블 기반 레거시 구조에서 접근성 이슈 전면 분석
기존 레이아웃 유지하면서 스크린 리더 호환성 개선
테이블 헤더 및 셀 연결성 강화를 통한 데이터 구조 명확화

사용자 경험 최적화

키보드 전용 사용자를 위한 포커스 순서 및 접근성 개선
색상 대비비 조정 및 텍스트 가독성 향상
이미지 대체 텍스트 및 링크 목적 명확화

표준 준수 및 검증

WCAG 2.1 AA 등급 기준 충족을 위한 세밀한 코드 수정
복잡한 테이블 구조에서도 접근성 확보하는 솔루션 연구 및 적용
한국전자인증(KICA) 웹접근성 인증 최종 획득

한국전자인증 웹접근성 인증 화면

클라이언트: 용인특례시
프로젝트 유형: 교통약자 이동지원 시스템
진행 기간: 2020년 4월 ~ 6월

오드오드의 역할

UI/UX 디자인: 교통약자 친화적 인터페이스 설계
프론트엔드 개발: 웹사이트 구현 및 접근성 최적화

용인시 교통약자 이동지원센터 화면

클라이언트: 이천시
프로젝트 유형: 복지시설 웹사이트
진행 기간: 2019년
사이트: 2000happydream.or.kr

오드오드의 역할

UI/UX 디자인: 시민 친화적 복지 서비스 인터페이스 설계
프론트엔드 개발: 웹사이트 퍼블리싱 및 접근성 구현

이천 동행누리센터 화면

프로젝트 유형: 수목원 공식 웹사이트
기술 스택: HTML, CSS, JavaScript
사이트: bcj.co.kr

오드오드의 역할

UI/UX 디자인: 자연 친화적 브랜드 아이덴티티 반영
프론트엔드 개발: 반응형 웹사이트 구현

벽초지수목원 메인 화면

벽초지수목원 상세 화면

프로젝트 유형: 투자/트레이딩 플랫폼
기술 스택: React, TypeScript

오드오드의 역할

UI/UX 디자인: 트레이딩 대시보드 디자인
프론트엔드 개발: 실시간 데이터 UI 구현

BullBull 메인 화면

BullBull 상세 화면