# 프론트엔드 설계 개요

## UI/UX 설계 및 개발

![](https://728901758-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_Wo7SRUvbKJuPojzzZ%2F-LuSZ6rOfo4NqYdSagZ6%2F-LuSaBPqNWLK7ZhNi4Gq%2Fimage.png?alt=media\&token=bbd60ffa-9801-4bf6-82ef-5904d28c7bca)

### 개요

현재 웹상에는 많은 웹페이지들이 존재한다. 게다가 모바일, 태블릿, 고화질 대화면 모니터 등의 많은 화면크기도 존재한다. 이렇게 다양한 조건을 가지고 있는 웹시장에 서 사용자에게 직관적이며 편리한 웹사이트를 제작하려면 UI/UX 설계가 선택이 아니라 필수이다. &#x20;

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

## 구현 과정&#x20;

* 요구 콘텐츠 구성
* 화면흐름도 정의
* UI/UX 컨셉 설정 및 기능 정의
* 필요 컴포넌트 및 이미지 디자인
* 레이아웃 및 콘텐츠 배치 설계 \[반응형 고려]
* 이미지 및 컴포넌트 설계 및 배치
* 프로토타입에 따른 개발
* 핵심 기능 연결
* 성능 평가 및 품질 평가
* 클로즈베타 및 오픈베타로 버그 발견 및 수정
* 배포

## 필수 콘텐츠 구성

본 프로젝트의 필수 콘텐츠는 우선순위에서 가장 상위로 사용자들에게 강조되어야 한다. 그러므로 필수 콘텐츠를 구성하여 설계에 높은 순위로 배치하도록 한다.

* 검색 기능
* 게시글 사용자 맞춤 추천 기능
* 게시글 실시간 인기 기능
* 정적 게시판 \[설문조사를 통한 대학생 대상 필요 정보로 분류]
  * 교내 정보
  * 동아리 및 모임
  * 공모전 및 행사
  * 진로 및 구인
  * 장터
* 내 정보
  * 최근 본 게시글
  * 관심 게시글
* 외부사이트 링크
  * OJ
  * 블랙보드
  * UIS
  * 두드림
  * 대양휴머니티칼리지
  * 유드림
  * 세종대역
  * 에브리타임 세종대학교
  * 캠퍼스 안내도
  * 세종대 위키백과
  * 세종대학교 건물별 시간안내
  * 실시간 열람실
  * 도서관 검색
  * 세종대학교 북카페
  * 레드테이블
  * 세종대학교 유튜브
* 게시글 기능
  * 관심 기능
* 약관 및 개인정보 처리방침 및 소개

## 요구 콘텐츠 구성

요구 콘텐츠란 본 프로젝트에서 필수 콘텐츠 다음으로 프로젝트에 도움이 되는 기능 및 컴포넌트로써 UI 및 UX 설계에 보다 도움이 되는 콘텐츠이다. 요구 콘텐츠의 기능 은 다음과 같다.

* 통계
  * 전체 사용자 액션 통계
  * 현재 사용자에서 인기많은 주제 분류
* 게시글 기능
  * 공유 기능
  * 의견보내기 기능
* 설정
  * 사용자 맞춤 UI/UX 배치 및 선택
  * 개인정보 관리 및 개인정보 삭제 기능
* 실험실
  * 향후 확장성을 위한 추가 기능 모음
