FRONTEND 설계 개요

FRONTEND summary.

개요

웹사이트를 이용하는 사용자들은 접속 브라우저도 다를 뿐더러 모바일, 태블릿, 고화질 대화면 모니터 등의 다양한 기기로 접속을 한다. 이렇게 다양한 조건을 가지고 있는 웹시장에서 사용자에게 직관적이며 편리한 웹사이트를 제작하기 위해 UI/UX 설계는 본질적으로 중요하며 필수적이다.

따라서 본 프로젝트에서도 프로젝트의 목적과 주제에 맞는 UI/UX 설계를 하여, 보다 사용자에게 직관적이고 편리하게 다가갈 수 있도록 프론트를 진행한다.

타겟 설정

본 프로젝트는 학교의 온라인 장부 서비스를 제공하기 때문에 학교 재학생들만이 사용한다. 따라서 사용자의 연령층은 20대이고, 소속은 부경대학교이다. 그리고 본 사이트를 이용하는 사용자는 온라인 장부를 사용하는 목적에 따라 일반 학생, 학생회장, 관리자로 나뉘어진다. 이렇게 20대 학생이라는 점과 사용자의 position에 따라 각 페이지의 목적이 달라지는 점을 고려하여 디자인 및 기능을 설계하였다.

의사결정

PKSCL는 일반 사용자는 모바일로 모든 기능을 수행할 수 있지만, 학생회장이나 관리자의 경우 장부 관리나 학생 및 학과 관리의 기능은 PC에서만 지원이 된다. 이는 장부의 내역을 업로드하거나 장부 관리 및 열람을 하는 학생을 판단할 때에 신중을 다해라는 의미를 내포하고 있다. 또한 장부를 관리하는 editmainPage나 학생 및 학과를 관리하는 managementPage에는 여러 기능들이 존재해서 각각의 기능 수행이 복잡해지기 때문에 사용자가 모바일로 이용을 하기에는 불편함을 느낄 수 있다고 판단하였다.

이러한 배경 속에서 본 프로젝트에서는 PC 버전을 중점적으로 개발하기로 결정을 하였다. 아래 첨부 사진을 확인해보면 최근래 PC로 browser에 접속한 사용자들 중 Crome을 이용하는 사용자가 압도적으로 많음을 확인할 수 있다. 따라서 본 프로젝트를 개발할 때에는 Crome 사용자를 최우선적으로 고려하여 개발을 진행하였다.

UI/UX 설계 및 기능 개발 과정

• 화면흐름도 정의

• 필수 및 추가 콘텐츠 구성

• UI/UX 컨셉 설정 및 기능 정의

• 레이아웃 & 컴포넌트 설계 및 배치

• 프로토타입에 따른 개발

• 성능 평가 및 품질 평가

• 베타 서비스로 버그 발견 및 수정

• 배포

• 사용자 의견 수렴해 디자인 및 기능 추가 및 수정