직접 디자인 하기

컨트롤 하나하나 직접 추가해 레이아웃 구성하기

스텝 선택 디자인영역에서 스텝을 선택합니다.
레이아웃 선택 스텝 하위에 레이아웃을 선택합니다. 스텝 하위에 레이아웃이 없다면, 좌측 툴바에 ‘레이아웃’ 아이콘을 클릭해 추가하거나, 우측 탐색기에 Step 우측 버튼을 클릭해 ‘레이아웃 추가’를 합니다.

좌측 툴바 또는 우측 스튜디오탐색기에서 레이아웃을 추가
좌측 툴바에서 원하는 컨트롤 선택 컨트롤 아이콘을 선택하면, 해당 컨트롤이 지원하는 컨트롤 스타일을 확인 할 수 있습니다. 원하는 디자인의 컨트롤을 클릭하면 컨트롤이 추가됩니다.

좌측 툴바에서 컨트롤 종류 선택 후 원하는 디자인의 컨트롤을 선택
우측 속성창에서 컨트롤 너비 조정 한 줄에 2개의 컨트롤을 배치하고 싶다면, 우측 속성창에 너비를 조정해주세요. 컨트롤 너비 단위는 ‘%, px, 직접입력’이 가능합니다.
그룹을 사용해 레이아웃 배치하기 화면을 디자인 하다보면 컨트롤을 배치를 위해 레이아웃을 크기를 조정해야 할 때가 있습니다. 이 경우 레이아웃을 그룹으로 묶어 배치가 가능합니다.

예를 들어 아래의 시안을 예를 들어 보겠습니다.

![모바일에서 자주 보는 좌측 이미지와 우측 컨텐츠로 구성된 레이아웃](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/426c8b24-52ca-4ab1-bc25-d79b8df9f18e/Untitled.png>)

모바일에서 자주 보는 좌측 이미지와 우측 컨텐츠로 구성된 레이아웃

좌측에는 이미지를 구성하고 우측에는 텍스트를 추가하려면 플렉스튜디오에서는 어떻게 해야 할까요?

- 레이아웃에 이미지 컨트롤을 추가한 후 너비를100px으로 높이를 65px로 조정합니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/b2cdbfd3-4a23-4952-8eb5-e5a7dd07a882/Untitled.png>)
    
- 텍스트를 추가할 레이아웃을 하나 더 추가합니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/c4517ee6-e486-470d-a4c3-bfd11f21cb04/Untitled.png>)
    
- 추가된 레이아웃에 ‘제목, 이름, 횟수’가 들어갈 라벨 컨트롤 3개를 추가합니다.
    
    ![좌측 툴바에서 라벨 컨트롤 선택](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/de6ef5e0-67be-4434-8efb-052ddef25760/Untitled.png>)
    
    좌측 툴바에서 라벨 컨트롤 선택
    
- 제목을 넣을 컨트롤에 ‘라벨명, 텍스트 사이즈, 텍스트 굵기’를 설정합니다.
    
    ![속성창에서 ‘텍스트’ 디자인 속성 설정](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/f4f07668-7866-4cc7-8d34-e3e5d15848c4/Untitled.png>)
    
    속성창에서 ‘텍스트’ 디자인 속성 설정
    
- 이름을 넣을 컨트롤에 ‘라벨명, 텍스트 크기, 텍스트 색상, 마진’을 설정합니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/2534a061-eb0d-4bdf-9b03-22b99866cc26/Untitled.png>)
    
- 횟수를 넣을 컨트롤에 ‘스타일 유형’을 ‘Radio3’ 선택합니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/b92848d6-bbf7-4958-ab08-5d9379a052c6/Untitled.png>)
    
- Shift키를 눌러 2개의 레이아웃을 선택 한 다음 `ctrl+G` 그룹으로 묶어 줍니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/456ecafb-531c-48ad-8409-ccae920c21f8/Untitled.png>)
    
- Layout1의 너비를 이미지의 크기 100px에 우측 여백 20px을 추가해 120px으로 설정합니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/40ba8c4a-c5ba-442c-a0dd-b086bbaa827d/Untitled.png>)
    
- Layout2의 너비 단위를 ‘직접입력’으로 선택해 calc(100% - 120px)’로 설정합니다.
calc()함수를 사용하면 더 디테일 한 너비 설정이 가능해요.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/97f30c7e-6871-4f3e-9ec9-4600fde54a7e/Untitled.png>)
    
- 좌측에는 이미지 우측에는 텍스트로 UI를 확인할 수 있습니다.
    
    ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/f1799a40-fc78-4c87-b2bb-086403c518a8/f1c6daee-32a8-4e71-b91f-1121fb066b9b/Untitled.png>)

! 여기서 꿀팁

레이아웃, 컨트롤, 그룹은 디자인 속성을 복사하여 붙여넣기가 가능해요. 디자인 속성을 복사하고 싶은 아이템을 선택해 ‘ctrl+shift+C’ 하면 스타일이 복사되고, 붙여넣을 아이템을 선택하여 ‘ctrl+shift+V’하면 됩니다.

템플릿을 이용해 디자인 하기

플렉스튜디오에서는 주기적으로 디자인 템플릿을 업데이트 하고 있어요. 기본으로 제공해 주는 템플릿을 사용해 좀 더 쉽게 레이아웃을 구성해 보세요.

디자인 템플릿 선택 좌측 툴바 가장 상단에 있는 템플릿 아이콘을 선택합니다.
레이아웃 템플릿 레이아웃 템플릿은 선택된 스텝에 레이아웃 디자인이 추가됩니다.
시나리오 템플릿 시나리오 템플릿은 전체 시나리오를 선택한 시나리오 템플릿으로 덮어 씌웁니다. 단, 시나리오 템플릿이 ‘편집하기’상태인 경우만 적용이 가능합니다.

시나리오 템플릿을 이용해 디자인해 보기

고객사 등록하기 시나리오 템플릿을 이용해 원하는 컨트롤을 추가해 디자인을 변경해 보겠습니다.

고객사 현황 시나리오 템플릿 선택