<aside>

작업 구분

기여도

작업 툴 및 언어

UI·UX 디자인, 웹 퍼블리싱

디자인 100% , 퍼블리싱 70%

Figma Websquare CSS jQuery

</aside>

AI 분석과 드론 영상을 활용하여 댐 시설물의 상태를 진단하고 결과를 시각화하는 시스템 구축 프로젝트로, UI·UX 디자인 전반과 웹 퍼블리싱을 담당했습니다.

사전에 정의된 화면 및 디자인 가이드라인을 기반으로 기획자와 관련 문서와 요구사항을 검토하고, 시스템 전반의 화면 구조와 UI를 가이드에 맞게 설계했습니다. AI 분석 결과와 시설물 정보를 사용자가 명확하게 확인하고 필요한 기능에 접근할 수 있도록 정보의 우선순위와 화면 구성을 정리하는 데 중점을 두었습니다.

설계한 UI를 바탕으로 WebSquare 환경에서 웹 퍼블리싱을 진행했습니다. 기존 웹 퍼블리싱과는 다른 WebSquare의 구조와 제약사항을 파악하며 시스템 요구사항에 맞춰 화면과 인터랙션을 구현했으며, 팀장님과 업무를 분담하여 프로젝트 전반의 퍼블리싱 작업을 수행했습니다.

GitLab 기반의 형상관리 환경에서 협업하며 화면별 작업과 수정사항을 관리하고, 기획 및 개발 과정에서 발생하는 변경사항을 지속적으로 반영했습니다.

공공기관 시스템의 표준 프레임워크로 WebSquare를 사용하고 있어 Eclipse 기반 WebSquare 환경에서 UI 작업을 진행했습니다. 처음 접하는 개발 환경이었지만 기존 시스템 구조와 모듈 방식, 화면 구성 방식을 빠르게 파악하며 작업을 진행했습니다. 기업에서 제공한 UI 가이드 문서를 기반으로 화면 구성 원칙을 검토하며 화면 구조와 레이아웃을 설계했습니다.