설비 유지보수 서비스로 들어서는 회원 전용 웹사이트

팩토리닥터 솔루션은 공장·창고 설비 유지보수 이력 관리와 유지보수 의뢰 중개를 제공하는 서비스로, 회원이 안전하게 진입하는 첫 화면을 중심으로 구축한 웹사이트입니다. 접속하면 로그인 화면이 바로 열리고, 이메일 로그인 → 회원가입(약관 동의 Step 1~3) → 아이디·비밀번호 찾기 팝업으로 이어지도록 흐름을 구성했습니다. 특히 푸른 원형 배경 위에 흰색 로그인 카드를 올리고 둥근 입력창과 버튼으로 정리해 처음 접속하는 사용자도 해야 할 일이 한눈에 보이도록 했으며, 모바일에서는 화면 폭에 비례해 여백과 글자 크기가 조정되도록 했습니다.

#팩토리닥터솔루션
#설비유지보수
#유지보수이력관리
#공장창고설비
#유지보수중개
#회원전용서비스
#로그인화면
#웹서비스
#반응형웹
#UIUX

Client: 팩토리닥터 솔루션
Category: 기타

Design Concept

설비 현장으로 가는 첫 관문

설비 유지보수라는 업무 특성상 사용자는 서비스를 둘러보기보다 로그인해서 바로 업무를 시작하는 경우가 많다고 보고, 첫 화면을 로그인에 집중시키는 것을 디자인의 출발점으로 삼았습니다.
푸른 원형 배경과 흰색 카드, 서비스 로고를 중심에 두어 브랜드 인상을 남기면서도 이메일과 비밀번호 입력, 로그인, 회원가입 버튼이 한눈에 들어오도록 정리했습니다.
또한 아이디 찾기와 비밀번호 찾기를 별도 페이지가 아닌 팝업으로 열어 사용자가 화면을 벗어나지 않고 계정 문제를 해결하도록 설계했습니다.

Design Elements

01

블루 원형 배경과 로그인 카드

상단에 푸른 반원형 배경과 로고를 두고 그 위에 흰색 카드를 얹었습니다.
입력과 버튼에만 시선이 모여 접속까지 걸리는 시간을 줄이도록 했습니다.
02

둥근 입력창과 아이콘 필드

이메일과 비밀번호 입력창에 아이콘을 넣고 둥근 형태로 통일했습니다.
무엇을 입력해야 하는지 문구를 읽지 않아도 알 수 있도록 했습니다.
03

팝업형 계정 찾기

아이디 찾기는 이름과 전화번호, 비밀번호 찾기는 이메일 인증 메일로 처리하는 팝업을 구성했습니다.
로그인 화면을 벗어나지 않고 계정 문제를 해결할 수 있습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#3E67EE

Sub Color#222222

Point Color#F17171
Royal Blue#3E67EE
Sky Blue#3D78E3
Cool Gray#7F7F7F
Mist Gray#E9EBEC
Soft White#F8F8F8
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

01 Pages

설비 유지보수 서비스로 들어서는 회원 전용 웹사이트 서브 페이지 1 — Sub Page 회원가입 약관 페이지 01

Note

로그인에서 회원가입까지 같은 규칙으로 이어지도록 설계했습니다.

로그인, 약관 동의, 계정 찾기 팝업이 같은 카드 형태와 색상 규칙을 공유하도록 했습니다.
단계가 바뀌어도 서비스를 이용하는 느낌이 끊기지 않도록 구성했습니다.

Grid: 화면 중앙에 하나의 카드를 두는 단일 컬럼 구조로 정리했습니다.
Header: 별도 메뉴 대신 서비스 로고와 서비스명을 카드 상단에 배치했습니다.
CTA: 로그인은 검정, 회원가입은 회색 버튼으로 구분해 주 행동이 먼저 보이도록 했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

비례형 로그인 카드모바일에서 카드 여백과 모서리, 글자 크기를 화면 폭에 맞춰 조정

계정 찾기 팝업아이디·비밀번호 찾기를 화면 이동 없이 팝업으로 제공

Optimization

Menu

PCMenu · 메뉴 없이 로그인과 회원가입 버튼 두 개로 동선을 단순화

MOMenu · 모바일에서도 같은 두 버튼을 전폭으로 배치해 누르기 쉽게 구성
Layout

PCLayout · 최대 너비를 제한한 중앙 카드 레이아웃

MOLayout · 화면 폭에 맞춰 카드 여백과 배경 높이가 줄어드는 구조
Typography

PCTypography · Pretendard 기반의 22px 굵은 카드 제목

MOTypography · 모바일에서 제목과 안내 문구 크기를 단계적으로 축소
Image

PCImage · 서비스 로고와 배경 이미지, 입력창 아이콘을 사용

MOImage · 로고와 배경 높이를 화면 폭에 맞춰 줄여 입력 영역을 확보