평택대학교 청년도약 인재양성 부트캠프 홈페이지 UI 디자인

평택대학교 청년도약 인재양성 부트캠프의 교육과정과 모집 정보를 제공하는 공식 홈페이지를 디자인했습니다. 사업단에서 전달받은 사이트맵과 내용 초안을 바탕으로 정보 구조를 보완하고, 전체 UI 디자인과 메인 슬로건 제작을 담당했습니다.

프로젝트 의뢰부터 사이트 공개까지 주어진 시간은 단 5일이었습니다. 디자인과 개발에 각각 충분한 시간을 확보하기 어려운 상황이었기 때문에, 시각적인 장식을 늘리기보다 사용자가 필요한 정보를 빠르게 찾을 수 있는 정적인 웹사이트를 목표로 작업했습니다.

AI, 실무 역량, 청년의 성장, 미래 진출을 핵심 키워드로 정하고, 부트캠프의 목적과 참여 이후의 변화를 함께 전달할 수 있도록 메인 슬로건을 작성했습니다.

이 사이트의 핵심 사용자는 교육 참여를 고민하는 청년 지원자입니다. 처음 전달받은 초안에는 메인 페이지에서 공지사항, 사업단 소식, FAQ 등 여러 메뉴로 이동할 수 있는 바로가기가 포함되어 있었습니다.

하지만 지원자가 사이트를 방문했을 때 가장 먼저 알고 싶은 것은 ‘어떤 교육이 있으며, 어떻게 신청할 수 있는가’라고 판단했습니다. 이에 메인 페이지의 정보를 과감하게 줄이고, ‘첨단인재형’과 ‘실전인재형’ 교육과정으로 이동하는 버튼을 가장 우선적으로 배치했습니다.

사이트는 첨단인재형과 실전인재형이라는 서로 다른 교육과정을 다루고 있습니다. 두 과정의 내용은 다르지만, 사용자가 페이지를 이동할 때마다 새로운 구조를 학습하지 않도록 동일한 레이아웃을 적용했습니다.

교육과정 소개, 세부 프로그램, 지원 혜택과 같은 정보를 같은 위치와 순서에서 확인할 수 있도록 구성해, 어느 교육과정에 들어가더라도 필요한 내용을 빠르게 찾을 수 있게 했습니다.

전달받은 원고는 대부분 긴 한글 문장과 표 형태의 교육 정보로 구성되어 있었습니다. 제한된 시간 안에서도 정보의 위계가 명확하게 보일 수 있도록 넓은 여백을 사용하고, 선을 중심으로 한 카드 디자인과 절제된 색상 체계를 적용했습니다.

핵심 내용은 카드로 나누어 빠르게 훑어볼 수 있도록 하고, 세부 교육과정은 표 형식을 유지하면서도 제목과 항목의 위계가 선명하게 드러나도록 정리했습니다. 시각적인 장식보다 가독성과 정보 탐색의 효율을 우선한 결과입니다.

5일의 개발 기간 중 디자인에 사용할 수 있는 시간은 이틀뿐이었습니다. 애니메이션과 복잡한 인터렉션은 제외하는 대신, 상단 영역과 버튼, 카드, 콘텐츠 레이아웃처럼 여러 페이지에서 반복되는 요소를 공통으로 설계했습니다.

이는 화면의 일관성을 유지하는 동시에 개발 시간을 단축시키기 위한 판단이었습니다. 별도의 모바일 전용 화면을 제작할 시간을 부족했지만, 데스크톱 화면을 설계하는 단계부터 모바일 화면까지 콘텐츠가 자연스럽게 배치될 수 있도록 반응형 구조를 함께 고려하여 설계했습니다.

프로젝트는 UI 디자인을 담당한 저와 전체 개발을 담당한 프론트엔드 개발자, 두 명이 함께 진행했습니다. Figma에서 완성된 화면을 순차적으로 공유해 디자인과 개발이 거의 동시에 이루어질 수 있도록 했습니다.

디자인이 모두 끝난 뒤 개발을 시작하는 방식이 아니라, 공통 요소와 완료된 페이지부터 바로 전달하며 구현 결과를 확인했습니다. 짧은 주기로 의견을 나누고 빠르게 결정하면서 디자인 이틀, 개발 사흘이라는 일정 안에 전체 사이트를 완성했습니다.

짧은 작업 기간은 단순히 빠르게 화면을 만드는 것보다, 무엇을 남기고 무엇을 덜어낼지 판단하는 능력을 요구했습니다. 사용자가 가장 먼저 필요로 하는 신청 정보를 중심에 두고, 반복 가능한 레이아웃과 공통 요소를 활용해 가독성과 개발 효율을 함께 확보했습니다.

특히 개발자와 디자인 과정을 실시간으로 공유하고 소통하면서, 디자인과 개발을 함께 진행함에도 불구하고 결과물의 완성도를 유지할 수 있었습니다.

제한된 시간 안에서 우선순위를 명확하게 설정하고, 실제 공개까지 무리 없이 소화했다는 점에서 빠른 의사결정과 협업의 중요성을 확인한 프로젝트였습니다.