고급 페이지 구축으로 앱 만들기 - 3. 브랜딩

고급 페이지 구축으로 앱 만들기 - 1. 소개
고급 페이지 구축으로 앱 만들기 - 2. 기본 앱 설정
고급 페이지 구축으로 앱 만들기 - 3. 브랜딩
고급 페이지 구축으로 앱 만들기 - 4. 요청 추가하기
고급 페이지 구축으로 앱 만들기 - 5. 요청 승인
고급 페이지 구축으로 앱 만들기 - 6. 알림
고급 페이지 구축으로 앱 만들기 - 7. 앱 번역하기

 

3.1 소개

https://academy.mendix.com/link/modules/183/lectures/1414/3.1-Introduction

모듈 2를 완료하지 못했다면 이 페이지 상단에 있는 프로젝트 패키지(mpk 파일)를 다운로드하여 이 학습을 계속 진행하세요.

잘 작동하고 안전한 애플리케이션만큼이나 보기 좋은 애플리케이션도 중요합니다. Mendix의 스타일링 도구를 사용하면 회사의 브랜드를 잘 표현하고 훌륭한 사용자 경험을 만들 수 있습니다. 기본 제공되는 여러 가지 스타일링 요소를 사용할 수 있지만 사용자 정의 스타일링을 만들 수도 있습니다. 앱에 커스텀 스타일을 추가하는 데는 두 가지 옵션이 있습니다:

SASS 변수 변경. Mendix는 기존 스타일링을 빠르게 변경하기 위해 SASS(Syntactically Awesome Style Sheets)를 사용하며, 이 스타일링은 CSS(Cascading Style Sheets)로 컴파일됩니다. 캐스케이딩 스타일 시트는 웹 페이지의 레이아웃 또는 이 경우 Mendix 앱의 레이아웃 형식을 지정하는 데 사용됩니다.

사용자 정의 레이어에 새 스타일 추가하기. SASS 또는 CSS를 사용하여 완전히 새로운 스타일을 만들 수도 있습니다. 이를 위해서는 이 코드를 직접 작성해야 하므로 전문가 기능으로 간주됩니다.

이전 모듈에서는 관리자로서 팀원을 관리할 수 있는 Expenses 앱의 기초를 구축했습니다. Andrea는 회사의 브랜딩에 따라 앱을 구축하기를 원합니다. 이제 다음 도구를 사용하여 회사의 브랜딩을 반영하도록 앱을 조정합니다:

Sass 변수를 변경하고 CSS로 컴파일하여 회사 브랜딩에 맞게 앱의 테마를 업데이트합니다.

일반 탐색 메뉴를 표시하고 사용자가 상단 표시줄에서 로그아웃할 수 있는 사용자 지정 탐색 레이아웃과 중요한 정보를 표시하는 동적 헤더를 빌드합니다.

사용자가 새 계정을 만들거나 기존 계정으로 로그인할 수 있는 사용자 지정 로그인 페이지를 만듭니다.

이를 위해 테마 커스터마이저를 사용하고 SASS 변수를 변경하여 스타일을 사용자 정의하는 방법을 배웁니다.

시작해 보겠습니다!

 

3.2 사용자 지정 탐색 레이아웃

레이아웃은 페이지에서 무엇이 어디로 이동하는지 지정합니다. 레이아웃은 애플리케이션 디자인에서 더 큰 유연성과 재사용성을 제공합니다. 각 페이지는 레이아웃을 기반으로 합니다. 레이아웃에는 해당 레이아웃을 기반으로 모든 페이지에서 반복되는 위젯과 구조가 포함되어 있습니다. 예를 들어 애플리케이션 로고를 레이아웃에 배치하면 해당 특정 레이아웃을 사용하는 모든 페이지에 애플리케이션 로고가 표시됩니다.

레이아웃은 애플리케이션의 사용자 인터페이스를 구성하는 데 사용되므로 일관된 레이아웃을 빠르게 익힐 수 있고 재사용을 통해 유지 관리가 용이합니다. 익숙한 것은 머리를 긁적이는 일을 줄여주며, 무언가에 익숙할수록 대응 방법을 찾기 위해 생각할 필요가 줄어듭니다. 문을 마주쳤을 때 문을 발로 차는 대신 본능적으로 손잡이를 잡는 것도 바로 이러한 이유 때문입니다. 이는 가장 쉬운 길, 저항이 가장 적은 길을 찾는 인간의 기본적인 특성입니다.

한 번 만든 레이아웃은 수천 번 반복적으로 사용될 수 있으므로 레이아웃을 한 번 변경하면 해당 레이아웃을 사용한 모든 페이지에 적용될 수 있으므로 디자인 유지 관리가 줄어듭니다. 예를 들어 10개의 페이지에서 동일한 레이아웃을 사용하는데 왼쪽 사이드바를 추가하려는 경우 10곳에서 만드는 대신 레이아웃 한 곳에서 만들면 매력적이고 아름다운 사용자 경험을 만드는 데 드는 귀중한 시간과 노력을 절약할 수 있습니다.

Atlas UI는 기본적으로 세 가지 탐색 레이아웃을 제공합니다:

Atlas 기본(사이드바에 탐색 메뉴가 있음)
Atlas 톱바(탐색 메뉴가 톱바에 있음)
팝업(전체 너비 페이지 대신 팝업 페이지)  

예를 들어 사이드바와 톱바가 모두 있는 앱을 만들려면 사용자 지정 탐색 레이아웃을 만들어야 합니다.

 

3.2.1 탐색 레이아웃의 기본 사항
레이아웃은 다음과 같은 중요한 구성 요소로 이루어져 있습니다:

스크롤 컨테이너
스크롤 컨테이너는 레이아웃을 헤더, 사이드바, 푸터 영역과 같은 개별 영역으로 나누고 해당 영역에 대한 스크롤 동작을 설정하는 데 사용됩니다. 스크롤 컨테이너는 유일한 최상위 위젯이어야 하므로 레이아웃을 구성할 때 항상 스크롤 컨테이너로 시작해야 합니다. 그 외에 스크롤 컨테이너는 다른 스크롤 컨테이너에 직접 배치할 수만 있습니다.

콘텐츠
콘텐츠는 탐색 모음부터 로그아웃 버튼까지 레이아웃을 사용하는 모든 페이지에 있어야 하는 모든 것을 다룹니다.
 
플레이스홀더
플레이스홀더는 레이아웃을 사용하는 모든 페이지의 캔버스를 형성하는 빈 영역입니다.

레이아웃을 기반으로 페이지를 만들 때 레이아웃의 콘텐츠는 동일하게 유지되지만 플레이스홀더 영역은 페이지의 고유한 내용을 포함합니다. 멘딕스는 적어도 하나의 플레이스홀더의 이름을 '메인'으로 지정하도록 규정하고 있습니다.

 

3.2.2 마스터 레이아웃

레이아웃은 다른 레이아웃을 기반으로 할 수 있으며, 이 경우 상위 레이아웃을 마스터 레이아웃이라고 합니다. 레이아웃에 마스터가 있는 경우 마스터에 정의된 플레이스홀더를 사용하여 보다 특수한 구성을 만들 수 있습니다. 페이지가 이 특수 레이아웃을 기반으로 하는 경우 마스터 레이아웃의 플레이스홀더가 아닌 이 새 레이아웃에 정의된 플레이스홀더만 사용할 수 있습니다. 마스터 레이아웃은 애플리케이션 디자인에서 더 많은 재사용을 제공하고 프로젝트의 유지 관리를 개선합니다. 마스터 레이아웃을 통한 재사용을 활용하면 DRY(반복하지 않기) 원칙을 프로젝트에 적용하여 이미 생성한 요소의 중복을 줄일 수 있습니다. 디자인 및 유지보수성을 계속 제어할 수 있습니다.

예를 들어 마스터 레이아웃은 헤더만 정의하고 파생 레이아웃(마스터 레이아웃을 사용하는)이 사이드바를 추가하는 경우, 페이지는 마스터 레이아웃 또는 파생 레이아웃을 기반으로 할 수 있으며, 마스터 레이아웃에 대한 변경 사항은 이러한 레이아웃 중 하나를 사용하는 모든 페이지에 반영됩니다.

이러한 레이아웃 체인은 필요한 만큼 길게 만들 수 있지만, UX 디자인 관행과 단순함의 가치(UX 및 UI 디자인의 중요한 가치)에 따라 최대 3개까지만 사용하는 것이 좋습니다.

 

3.2.3 사용자 지정 탐색 레이아웃 만들기

이제 사용자 지정 탐색 레이아웃이 작동하는 방식과 필요한 시점에 대해 이해했으므로 이제 North Sea Shipbuilders 애플리케이션을 위한 레이아웃을 만들어 보겠습니다.

새 레이아웃을 만듭니다.
앱 탐색기에서 경비 모듈의 Resources 폴더를 마우스 오른쪽 버튼으로 클릭하고 Add other > Layout 을 선택합니다.
새 레이아웃의 이름을 Atlas_Custom으로 지정합니다.
확인을 클릭합니다.
새 레이아웃이 자동으로 열립니다. 기본적으로 다음과 같이 표시됩니다:

속성 패널에서 마스터 레이아웃을 Atlas_TopBar로 설정합니다. 이렇게 하면 탐색 레이아웃이 Atlas_TopBar 레이아웃에서 상속되므로 작업이 절약됩니다!
앱의 모든 곳에 두 가지를 표시하는 동적 헤더를 추가하겠습니다:

일반 직원의 경우: 총 요청 금액과 그 중 승인된 금액.
재무 직원의 경우: 모든 직원이 요청한 금액과 그 중 승인된 금액이 표시됩니다.
또한 이 헤더에서는 직원이 새로운 비용 추가 버튼을 통해 새 요청을 생성할 수 있습니다.

탐색 레이아웃에 동적 데이터를 직접 추가할 수는 없습니다. 하지만 데이터를 표시하는 스니펫을 사용하면 가능합니다! 지금은 스니펫과 헤더를 만들지만 나중에 학습 경로에서 동적으로 만들 것입니다.

헤더를 위한 공간을 만들려면 레이아웃에 상단 영역을 추가해야 합니다. 스크롤 컨테이너를 클릭할 때 나타나는 상단 영역 추가 버튼을 클릭하면 됩니다.

탐색 레이아웃의 상단 영역에 코드 조각 호출 위젯을 배치하고 경비 모듈의 리소스 폴더에 HeaderExpenses라는 새 코드 조각을 만듭니다. 이 코드조각은 나중에 학습 경로에서 업데이트할 것입니다.

홈 페이지를 엽니다.

새 Atlas_Custom 탐색 레이아웃을 홈페이지의 탐색 레이아웃으로 설정합니다.
홈페이지의 기존 헤더를 삭제하면 홈페이지에 두 개의 헤더가 생깁니다.
탐색 메뉴를 엽니다. 메뉴에 로그아웃 버튼을 추가합니다.

 

3.3 사용자 지정 로그인 페이지
모든 Mendix 앱에는 다음과 같은 기본 로그인 페이지가 있습니다:

이제 다른 로그인 페이지를 만들고 싶다고 가정해 봅시다. 다른 디자인을 원하거나 아직 계정이 없는 사람들도 계정을 만들 수 있는 페이지를 원하기 때문일 수 있습니다. 로그인 페이지를 변경하는 방법은 두 가지가 있습니다:

사용자 정의 로그인.html 파일 만들기
기본 제공 사용자 정의 로그인 페이지 사용
이 방법이 어떻게 작동하는지, 두 옵션의 장단점은 무엇인지 살펴보겠습니다.

사용자 정의 로그인.html

사용자 정의 로그인 페이지를 만드는 한 가지 방법은 기본 로그인 페이지를 대체하는 사용자 정의 login.html 파일을 만드는 것입니다. 이 방법은 HTML을 작성해야 하므로 전문가 기능으로 간주됩니다.
이 학습 과정에서는 이 방법을 사용하지 않지만 장단점에 대한 개요는 참조용으로 여기에 나와 있습니다:

장점
익명 사용자를 허용할 필요가 없으므로 매우 안전한 옵션입니다.
로그인 후 Mendix 앱이 로드되므로 앱의 보안이 다시 강화됩니다.

단점
이 페이지를 작성하려면 HTML을 작성할 수 있어야합니다.

내장된 사용자 정의 로그인 페이지
사용자 정의 로그인 페이지를 만드는 두 번째 방법은 기본 제공 사용자 정의 로그인 페이지를 사용하는 것입니다. 이 기능은 Mendix 앱에서 바로 사용할 수 있습니다. 사용자 정의 로그인.html 솔루션보다 사용하기 쉽지만 다음 장단점 목록에서 볼 수 있듯이 보안에 더 주의를 기울여야 합니다. 익명의 사용자에게 앱에 대한 액세스를 허용해야 하기 때문입니다.

장점
간편한 사용
HTML 작성 방법을 몰라도 됩니다.

단점
익명 사용자를 허용해야 합니다.
로그인하기 전에 전체 Mendix 앱이 로드됩니다.

이 학습 과정에서는 기본 제공 옵션을 사용하여 사용자 지정 로그인 페이지를 구축하는 방법을 배웁니다. 또한 익명 사용자에게 데이터에 대한 액세스 권한을 부여하지 않고 앱에 대한 액세스를 허용하는 방법도 배웁니다.

 

3.3.1 사용자 지정 로그인 페이지 만들기
이 단계에서는 직원들이 직접 로그인하거나 계정을 만들 수 있는 사용자 지정 로그인 페이지를 구축합니다.

로그인 페이지 설정하기

첫 번째 단계는 App Security 내에서 익명 사용자가 앱에 액세스할 수 있도록 허용하는 것입니다.
Anonymous 이라는 이름의 새 사용자 역할을 만듭니다.
또한 Expense  모듈에서 Anonymous 이라는 이름의 새 모듈 역할을 만듭니다.
사용자 역할과 모듈 역할이 연결되어 있는지 확인합니다.
앱 보안에서 익명 사용자 탭을 열고 다음 설정을 적용한 후 확인을 클릭합니다.

Resources 폴더에 새 레이아웃을 만듭니다. 이름을 Atlas_Login으로 지정하고 그대로 둡니다. 이렇게 하면 로그인 페이지가 메뉴 표시줄을 표시하지 않고 전체 너비 페이지가 될 수 있습니다.
새 폴더를 만듭니다: Expenses 모듈에서 익명 사용자 폴더를 만듭니다. 그 안에 Pages 하위 폴더를 만듭니다.
방금 만든 페이지 폴더에 새 페이지를 만듭니다.

이름을 입력합니다: Login
탐색 레이아웃: Atlas_Login
템플릿:  Form login (in Forms)

Navigation 을 열고 새로 만든 로그인 페이지를 기본 홈 페이지로 설정합니다.
Administrator, Requestor 및 Approver 사용자 역할에 대한 역할 기반 홈 페이지를 만듭니다. 대상을 Expenses 모듈의 홈 페이지로 설정합니다.
인증 섹션에서 새 로그인 페이지를 로그인 페이지로 설정합니다.

 

3.3.2 로그인 페이지 디자인하기

로그인 페이지를 엽니다.
이 페이지에는 필요하지 않은 데이터 보기가 포함되어 있습니다. 삭제하세요.
오른쪽 열의 텍스트를 업데이트합니다. 

 

예를 들어

• Welcome to North Sea Shipbuilders Expenses
• Use this app to get your expense requests approved!

텍스트 위젯이 포함된 컨테이너의 속성에서 콘텐츠 정렬 속성을 열로 왼쪽 정렬로 설정합니다.
삭제한 데이터 보기를 포함하던 컨테이너에 유효성 검사 메시지 위젯을 배치합니다.
컨테이너 아래에 로그인 ID 텍스트 상자 및 비밀번호 텍스트 상자 위젯을 배치합니다.
텍스트 상자 위젯 아래에 로그인 버튼 위젯을 배치하고 다음 설정을 구성합니다:

일반 탭:
버튼 스타일: Primary
유효성 검사 메시지 위젯: ValidationMessage1

모양 탭:
클래스: btn-block btn-rounded
이제 페이지가 다음과 같이 표시됩니다:

디자인 모드를 사용하여 작업 결과를 확인하세요!

 

3.3.3 익명 사용자의 등록 허용

이 시점에서 이미 계정이 있는 직원은 앱에 로그인할 수 있습니다. Andrea는 아직 계정이 없는 직원도 직접 계정을 만들 수 있도록 요청했습니다. 여기서 몇 가지 중요한 사항이 있습니다:

익명의 사용자는 데이터에 액세스할 수 없어야 합니다.
Andrea는 노스씨조선 직원만 가입할 수 있도록 해야 합니다.
가입 후 직원들은 이제 로그인할 수 있는 로그인 페이지로 돌아갑니다.
Anonymous Users 폴더에 새 하위 폴더를 만들고 이름을 Microflows로 지정합니다.
Registration 엔터티 를 신규로 만듭니다.
이 엔티티는 데이터베이스에 계정으로 저장되기 전에 개체의 정보를 계정 개체로 복사할 것이므로 non-persistable 로 생성합니다.
이 엔티티에는 다음과 같은 string 속성이 필요합니다: FullName, UserName, EmailAddress, Password, ConfirmPassword
익명 사용자에게 모든 속성에 대한 읽기, 쓰기 권한을 부여합니다.
익명 사용자에게 만들기 권한을 부여합니다.

로그인 페이지에 여기에서 가입하기 섹션을 추가합니다.
레이아웃 그리드에는 클래스 spacing-inner-large 로 설정합니다.
컨테이너의 콘텐츠 정렬이 열로 Center align as a column 로 설정되어 있어야 합니다.

Sign up here! 새 개체(Create Button) 를 만듭니다.
개체를 생성할 엔티티로 Registration  엔티티를 선택합니다.
Registration_New  라는 새 팝업 페이지를 클릭 시 페이지로 생성하고 익명 사용자 폴더에 저장합니다.

Anonymous 에게 페이지에 대한 액세스 권한을 부여합니다.
Registration_New 페이지를 엽니다:
두 비밀번호 필드의  속성을 비밀번호로 표시로 설정합니다.
저장 버튼 캡션을 내 계정 만들기로 변경합니다.
내 계정 만들기 버튼의 클릭 시 동작을 마이크로 플로우 호출로 설정합니다.
ACT_Registration_CreateTeamMember라는 이름의 새 마이크로플로우를 만들고 익명 사용자 폴더의 마이크로플로우 폴더에 저장합니다.
익명 사용자에게 마이크로플로우에 대한 액세스 권한을 부여합니다.
다음 이미지를 사용하여 마이크로플로우를 빌드합니다:

일반적으로 이메일을 통해 전송되는 인증 링크를 사용하여 이 기능을 확장합니다. 이렇게 하면 @shipbuildersinc.com 이메일 주소만 허용하는 정규식과 결합하여 노스씨조선의 직원만 계정에 가입할 수 있습니다.

그러나 이는 이 학습 경로의 범위에 포함되지 않습니다.