IU

반응형 매거진 뷰 만들기 Part1 - 디자인

Part1 에서는 브라우저의 사이즈에 따라 크기가 조절되는 레이아웃을 디자인하여 보겠습니다. 우측의 버튼을 클릭하여 필요한 이미지 리소스를 다운받은 후, 아래 순서대로 따라해 보세요. 

2015/07/06 

사용위젯 : 박스 / 텍스트 / 셀 / 캐러젤

예상 소요시간 : 40분

File > New Project 를 실행하여, 헤더/푸터가 있는 빈 페이지 Empty Page (Header / Footer) 를 선택한 후 윈도우 하단의 Choose 버튼 을 클릭합니다.

STEP 01

View > Resource 메뉴를 실행하여 리소스 패널을 열고 아래 리소스 불러오기 Import Resource 버튼 을 클릭하여

다운로드한 이미지 리소스 파일들을 불러옵니다.

STEP 02

스트럭쳐 Structure 에서 인덱스 Index 선택 후, 텍스트 Text 탭에서 폰트를 Roboto Slab 로 설정합니다. 인덱스 하위의 모든 폰트요소에 동일하게 적용이 됩니다. (폰트를 개별적으로 선택하지 않은 경우에만)

STEP 03

헤더 Header높이54px 로 변경한 후, 센터박스삭제하고, 셀 Cell 위젯을 추가하여 텍스트, 컬러, 굵기, 크기 등을 수정합니다.

X / Y 값0으로 입력하고, 너비 W100%, 높이 H 54px 로 입력합니다. (셀 위젯은 높이를 픽셀로만 설정할 수 있습니다.)

STEP 04

스타일 Style 탭에서 헤더에 하단 보더1px 추가하여 줍니다. 보더의 컬러도 아래와 같이 설정하여 줍니다.

STEP 05

STEP 06

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 내부 요소의 높이만큼 조정이 됩니다.

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 720px 만큼 조정이 됩니다.

이제 좌측 박스 안에 캐러젤 Casrousel 위젯을 추가합니다. x/y 포지션 Position 속성을 0px/0px 로 변경하여 준 뒤, 너비와 높이를 각각 100% 100% 로 설정하여 줍니다. 그리고 프라퍼티탭으로 이동해서 아래처럼 캐러젤 위젯의 프라퍼티 (아이템 숫자, 페이지네이션, 화살표 , 자동재생)를 설정하여 줍니다.

STEP 07

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 720px 만큼 조정이 됩니다.

추가한 캐러젤 위젯의 각 아이템의 배경에 넣을 이미지를 선택하여 줍니다. 스타일 탭 배경이미지 추가 버튼을 실행하여 이미지를 선택합니다. 배경 사이즈 Background Size 를 2번째 옵션인 가로 맞춤 (cover) 으로 선택하여 준 다음, 팝업을 열어 배경 위치 BG PositionCenter / Center 로 설정합니다.

STEP 08

캐러젤 아이템에 아래처럼 박스텍스트를 추가한 다음, 포지션 속성을 Absolute - Bottom 으로 설정하여 주고 위치(x,y)를 0px 0px 크기를 100% 240px 로 설정하여 줍니다. 마지막으로 스타일 탭에서 투명도 Opacity 0.95 ( = 95%) 로 설정하여 살짝 비치는 효과를 추가하여 줍니다.

 

STEP 09

박스의 가로사이즈에 따라 텍스트의 너비가 변화하게 하기 위해, 텍스트위젯의 가로 W 사이즈를 93% 로 설정하여 줍니다.

완성한 박스를 다른 캐러젤 아이템에도 복사 & 붙여넣기 한 다음, 번호를 수정하여 줍니다. 

STEP 10

캐러젤 우측의 너비 40% 박스 안에, 이미지를 넣을 새로운 박스를 추가하여 줍니다. 포지션 속성을 Relative - Left 로 설정하여 준 뒤

너비높이를 각각 56% 100%로 설정하여 주고 배경 이미지를 넣어 줍니다. 배경 이미지는 아까와 동일하게 가로 맞춤, Center Center 옵션을 설정하여 줍니다.

STEP 11

이미지 박스 우측에 텍스트를 담을 박스를 하나 더 추가합니다. 포지션 속성을 Relative - Left 로 설정하여 주고, 너비높이를 각각 44% 100%로 입력한 후에, 사이즈 Size 팝오버를 열어 Calc-Height 입력필드에 100% - 1px 을 입력합니다. 그리고 보더 Border 타입을 Dotted 로, 하단 보더1px 로 설정하고 색상을 설정하여 줍니다. 박스 내부 텍스트의 너비는 80%로 설정하여 줍니다.

STEP 12

?

Calc

STEP 611, 12 에서 수정한 너비 40% 박스를 스트럭쳐에서 선택한 다음, Command (⌘) + D 키를 2번 실행합니다. 

포지션 속성이 Relative - Left 이기 때문에 아래로 정렬되며 복제됩니다. 복제된 박스 내 이미지를 각각 다른 이미지로 교체하여 줍니다.

STEP 13

?

수고하셨습니다! 이제 빌드를 실행하면, 브라우져에서 동작하는 것을 보실 수 있습니다.

Part 2 에서는 Part 1에서 설계한 디자인이 브라우저 사이즈에 따라 변화할 수 있도록 미디어쿼리를 설정하는 방법을 알려드립니다.

STEP 14