# 디자인 컨셉 및 기능 정의

## UI/UX 컨셉 정의

* PKSelect 제작의도에 따라 다양한 기능을 구현하는 서비스가 아니고 쉽고 빠르게에 초점을 두고 디자인 컨셉을 잡았다.
* 부경대 재학생들이 주 타겟이기 때문에 pkselect 웹사이트를 이용하는 사용자들은 이미 lms에 많이 익숙해졌을 것으로 예상한다.  그래서 UX를 고려해 lms에서와 비슷한 분위기를 연출하기로 했다.

## Design

### 1) 색상

#### ❑ 메인 색

* lms에서 주로 사용한 흰색, 회색, 남색과 정보전달이라는 목적과 어울리게 전체적으로 차분한 색상을 찾아보았다. adobe color 사이트를 이용하여 실험적으로 여러 색들을 대비해보았고 다음과 같은 최종 5개의 메인 색상을 결정하였다.

![](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiZpKmP92-pLA9_KmoC%2F-MkQ_GkzuLKrfhjLjABU%2F-MkQ_u7n3ns3-xP6F891%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.06.44.png?alt=media\&token=56d72848-755b-40f7-8157-08259c6c12bc)

####

#### ❑ 미제출 항목 색

: 캘린더와 테이블에 미제출 항목을 나타내기 위해 사용되는 컬러도 lms를 참고하여 결정하였다.

* 파란색(#3d72b3) : 미완료된 강의
* 초록색(#59995f): 미제출된 과제
* 빨간색(#c95a49): 미완료된 시험일정

![](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiZpKmP92-pLA9_KmoC%2F-MkQaeoYOSE1u3JuVOpd%2F-MkQaiqrsOMUDAhUzmX8%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.17.56.png?alt=media\&token=a2b66673-7634-403c-9741-057fbaa9b77e)

### 2) 글꼴

#### ❑  로고 글꼴

\
&#x20;: 본 웹페이지의 목적에 맞게 "빠르게"를 강조하고 싶었습니다. 빠른 이미지와 어울리는 항공사,자동차, sns, 배송업체의 로고를 분야별로 찾아보았습니다. 이렇게 찾아본 로고들을 모아놓고 관찰한 결과 얇고 각진 글꼴을 이용했다는 것을 발견했습니다. 따라서 저희 알파카도 이를 바탕으로 얇고 각진 디자인의 글꼴을 찾아 PKSelect의 빠르고 편리하다는 이미지를 강조하고 했습니다.

![](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiZpKmP92-pLA9_KmoC%2F-Mker3eOfvGyH3S3wtKh%2F-MkesD0_KhpofYwD20ND%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-28%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.28.38.png?alt=media\&token=1f87bb0e-d365-4c00-8435-302e4a911400)

![Amelaryas font](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiZpKmP92-pLA9_KmoC%2F-Mkb7X2NROUxuJQmmmoq%2F-Mkb8TvrHMghhyIiBkUA%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-27%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.05.56.png?alt=media\&token=6feda0e0-7160-4239-9715-7b8510f6027f)

#### ❑ 기본 글

\
&#x20;: 로고와 마찬가지로 정보전달에 용이하면서 사용자가 사용 친숙함을 느낄 수 있길 바랐다. 그래서 한글이나 ppt 등의 기본 프로그램에서 사용자가 자주 접해봤을 법한 고운돋음 글꼴 선택하게 되었다.

![Gowun Dodum Font](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiZpKmP92-pLA9_KmoC%2F-MkY_NKOrNQBhOeEfPjl%2F-MkYeAqAI7W18c40Vre-%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-27%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%204.48.47.png?alt=media\&token=fd560d1d-fd98-4eaf-b9d2-69532d6d54c3)



> \--> 사용자들이 본 웹사이트를 사용시에 전체적인 위치나 색상 등은 개선점들이 보일 수 있기에 중간 발표 전에 사용자들의 피드백을 받아 개선할 부분을 수정 할 예정이다.
