스텝 플레이스
플랫폼 구축 프로젝트
- Client
- 스텝 플레이스
- Date
- 2022. 10 - 2022. 12
- Type
- 플랫폼, React, 반응형 구축
Overview
스텝 플레이스의 최상위 플랫폼 목적은 “MAU 월 1000명 이상” 이었습니다.
많은 사용자가 사용할 수 있는 플랫폼이 될 수 있도록 편한 UX뿐만 아니라 스텝 플레이스만의 UI 디자인을 구성하여 소비자 인식 사이에서 장소를 추천 받을 수 있는 곳은 스텝 플레이스다 라는 것을 새겼습니다.
또한, 템플릿형 UI / UX 디자인에서 벗어난 맞춤형 디자인 & 마이크로 인터렉션을 선보였습니다.
Goal
MAU 월 1000명 이상
UI/UX Strategy
다양한 정보를 아우르는 UI
스텝 플레이스의 방대한 정보와 제품을 위한 공통적인 가이드가 필요하였습니다.
통일된 그리드와 컴포넌트를 활용하여 UI 가이드를 제작하였습니다.
편리한 디자인
사용자와 관리자의 편의성 증대를 위한 UX/UI의 디자인을 개선하였습니다.
직관적인 레이아웃
대시보드의 구성을 참고하여 빠른 이동과 직관적인 정보 전달이 가능하도록 하였습니다.
STEP PLACE
Design System
전체적으로 세련되고 현대적 스타일의 고딕체로 스마트폰 및 태블릿 같은
작은 화면의 디바이스에서도 텍스트를 보다 쉽게 읽을 수 있도록 가독성을 고려했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19191106/spoqa.png)
Noto Sans KR
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19191148/spoqa_long.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/16185257/pretendard-KR.png)
Noto Sans KR
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/16185257/pretendard-KR-long.png)
Color System
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20103559/%EB%B8%8C%EB%9E%9C%EB%93%9C-6.png)
여유로운 장소를 찾는다면,
스텝 플레이스
고객의 상상을 돕는 UI디자인
실제 스텝 플레이스를 이용하는 고객의 게시글을 배치시켜
고객의 상상을 도와 스텝 플레이스에 대한 궁금증을 증폭시켰습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20103932/screencapture-vncom-kr-home-2022-12-08-11_14_14-5.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20103930/screencapture-vncom-kr-2022-12-08-11_15_15-1-5.png)
STEP PLACE
Subpage
POSTING PAGE
스텝 플레이스의 브랜드 컬러를 활용한 UX 디자인으로
사용자에게 독특함과 편리함을 주는 작성 페이지입니다.
‣ 작성 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104523/screencapture-gurufirst-co-kr-aboutus-2022-12-01-12_30_25-1-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104522/screencapture-gurufirst-co-kr-aboutus-2022-12-01-12_30_25-1-1-5.png)
MY PAGE
프로필 편집, 피드와 활동, 작가신청 등을 한 페이지에 모아
홈페이지 사용자로 하여금 편리한 사용을 얻게 만들었습니다.
‣ 마이 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104524/screencapture-gurufirst-co-kr-expertise-2022-12-01-12_33_13-1-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104524/screencapture-gurufirst-co-kr-expertise-2022-12-01-12_33_13-1-1-5.png)
NOTICE PAGE
홈페이지를 이용하다가 생기는 궁금증을 해결하거나
새로운 소식을 확인할 수 있는 공지사항 페이지입니다.
‣ 공지사항 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104526/screencapture-gurufirst-co-kr-members-2022-12-01-12_30_56-1-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104525/screencapture-gurufirst-co-kr-members-2022-12-01-12_30_56-1-1-5.png)
STEP PLACE
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 웹과 동일한 경험이 가능하도록 완벽한 반응형 대응을 진행하였습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104909/Group-3235-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104911/screencapture-attometal-co-kr-html-media-recruit-html-2022-12-06-12_33_25-1-4.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104911/screencapture-attometal-co-kr-html-project-platformBusiness-html-2022-12-06-12_33_52-3.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/20104910/screencapture-attometal-co-kr-html-company-history-html-2022-12-06-12_33_06-3.png)