0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 백오피스 로그인 화면을 작업합니다.

<백오피스 로그인 화면> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.

---

1

백오피스는 로그인이 반드시 필요합니다. URL 만 알면 아무나 접속해서 데이터를 막 고치면 안되니까요.

2

SBAdmin2 템플릿에서 제공하는 로그인 화면을 수정해서 심플한 모양의 로그인 폼을 만들어 보겠습니다. 구체적으로는 ID 와 비밀번호만 입력받을 수 있는 아주 간단한 폼입니다.
원본 SBAdmin2 템플릿은 다음과 같습니다.

3

다운로드한 리소스 파일들을 /backoffice 폴더로 옮깁니다.

4

login.html 파일을 /backoffice/login/index.php 로 가져오고 언어와 문서 제목을 변경합니다.

5

강아지 모양을 제거하기 위해 해당 부분을 검사기로 확인해 봅니다.

6

영역을 확인했으니 코드에서 삭제합니다.

<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>

7

넓이에 비해 공백이 너무 많네요. 로그인 화면을 늘려보겠습니다.

8

Welcome Back! 을 제거합니다.

9

Remember Me 버튼을 지웁니다.

10

소셜 로그인 항목을 없에겠습니다.

11

계정 관련 정보도 삭제합니다.

12

이제 로그인 페이지는 다음처럼 보입니다.

---

개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.