Responsive WEB - Axure Deep Dive#14

모바일, 태블릿 기기가 다양해짐에 따라서, 반응형 웹이 꼭 필요하게 되었습니다.

구글 검색 엔진에 노출이 잘 되기 위해서라도 각 사의 홈페이지들을 반응형으로 제작할 필요성이 있는데,

엑슈어에서도 반응형을 구현해보도록 하겠습니다.

 

일단 엑슈어에서는 기본적으로 적응형 웹을 제공하고 있습니다.

적응형 웹 기본 제공

다만, 적응형 웹으로 작업 시 유저가 윈도우 창을 스스로 줄일 때, 설정한 break point에 도달 시, 해당 레이아웃을 바로 변환해서 보여 주기 때문에 매끄럽지 않는 부분이 있습니다.

 

적응형 웹에 대한 내용을 더 알고 싶으시면:

https://ko.wikipedia.org/wiki/%EC%A0%81%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8

적응형 웹 디자인 - 위키백과, 우리 모두의 백과사전

 

이와 반대로, 반응형 웹은 유저가 가로사이즈를 점차적으로 줄여도, 끊기는 부분 없이 바로바로 해당 사이즈에 맞게 설정한 값을 그대로 보여줍니다. 반응형 웹에서 가장 중요한 기술은 css로 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)를 사용해서 구현합니다.

 

엑슈어에서는 해당 작업을 구현 시, window.width 라는 함수를 사용하고, 다이내믹 패널, repeater를 활용하면 구현이 가능합니다. 이번 포스트에서는 간단한 예시를 보여드려서, 엑슈어로 작업해도 반응형으로 구현이 가능하다는 것을 보여드리도록 하겠습니다.

 

엑슈어에서 페이지 설정을 web으로 하고, 가로 너비를 900으로 한뒤 상단 탑 내비게이션 바랑, 이미지, 텍스트를 추가해보겠습니다.

 

이렇게 작업 후, 미리보기를 클릭 하면, 다음과 같이 노출됩니다. 전혀 반응형이지 않고, 딱 작업한 그대로 노출되는 상태입니다.

실제 작업은 900 사이즈에 작업을 하였기에, 그보다 넓은 윈도우창으로 볼 경우, 내비게이션 바도 채워지지 않고, 이미지들도 조금 작게 보이는 듯 합니다. 그럼 지금 부터 해당 페이지를 반응형으로 구현해보도록 하겠습니다.

 

1. 다이내믹 패널을 활용하여, 가로 전체 bg 깔기

다이내믹 패널을 생성하고, 해당 다이내믹 패널에 색상을 준 뒤, 100% wide 체크 후, 원하는 색상을 선택합니다.

이렇게 지정하게 되면 다음과 같은 결과를 얻습니다.

100% wide 다이내믹패널

해당 방법을 활용하여, 반응형 웹에서 bg를 가로 사이즈에 맞게 노출 시킬 수 있습니다.

 

2. css%처럼 이미지 키우기

css에서는 width를 기준으로 해당 이미지 크기를 %로 설정이 가능하여, 가로 사이즈에 맞게 이미지가 커지거나 줄어들게 작업이 가능합니다. 이러한 작업을 엑슈어에서도 해보도록 하겠습니다.

 

여기서 사용하는 개념은 window resized 이벤트 시, set size 인터랙션을 통해서 구현할 예정입니다.

아무것도 클릭하지 않은 상태에서 윈도우 리사이즈들 선택해줍니다. 이후 set size를 선택 해주고, 이미지와, 이미지를 감싸는 다이내믹 패널에 모두 사이즈를 window 가로값에 맞게 늘어나거나, 줄어들도록 값을 설정해줍니다. 세로도 마찬가지로, 초기 이미지 가로 값에서 세로 값만 변경해서 지정해줍니다.

[[초기 이미지 가로 값 * window.width / 설정한 페이지 가로 값 ]]

 

그렇게 되면 다음과 같은 결과를 얻습니다. 자 가로 사이즈에 맞게, 잘 늘어난 것을 보실 수 있습니다. 다만 초기 설정 값이 위젯들의 설정은 가운데 정렬로 설정하였기 때문에, 해당 값을 좌측 기준으로 설정해주도록 합니다.

페이지 디폴트에서 좌측으로 설정 후, 윈도우창을 늘렸다가, 줄여보시면 다음과 같이 구현된 모습을 확인할 수 있습니다.

똑같이 우측에 있는 이미지에도 위와 같은 작업을 한 뒤 확인해보시면, 이미지와 이미지 사이의 여백이 문제라는 것을 아실 수 있습니다. 이유는 초기에 설정된 이미지 2의 x좌표 값은 고정된 좌표값이라 해당 x좌표값을 기준으로 사이즈가 늘어나거나, 줄어들기 때문입니다. 이것을 해결해 봅시다!

 

3. x좌표값을 가로사이즈에 맞게 조절하기

css는 flexbox라는 기술을 통해(space between) 자연스럽게 적용이 됩니다. axure에서는 해당 값을 window.width를 통해서 구현해야합니다. 이부분은 업데이트가 되었으면 좋겠네요!

이 부분은 우측 이미지의 x 좌표 값은 위와 동일한 방식으로 설정해주면 바로 해결이 됩니다.

[[우측 이미지 x 좌표 값 * window.width / 설정한 페이지 가로 값 ]]

설정된 모습

4. 텍스트 영역도 해결하기

위와 같은 방식(set size, move)를 활용하여 텍스트 영역도 해결할 수 있습니다.

여기 까지만 적용 하면, 얼추 반응형에 가까워진 모습이 보입니다. 다만 엑슈어에서는 각 위젯들간 영역이 침범이 가능해서, 해당 부분을 적절히 잘 맞추려면, 브레이크포인트를 활용해야합니다. 해당 부분은  포스팅이 길어져 break point를 활용하는 건은 다음 포스팅에 이어나가도록 하겠습니다.

 

여기까지 완료된 프로토타이핑 : https://krqqmb.axshare.com

Untitled Document