화면 일부 영역에 스크롤 만들기.
예를 들면, 이런 화면들.
화면 전체 스크롤이 아니라, 화면의 일부 영역에만 스크롤이 있다.
아래 구글지도를 보자면
왼쪽은 스크롤 영역이고, 우측은 별도의 지도 영역이다.
기획서에서 이렇게 일부만 스크롤이 적용된 화면을
구현하는 방법을 설명해보겠다.
전체 화면 스크롤의 경우 굳이 스크롤을 구현하지 않아도 되지만
화면 안의 일부 영역에 스크롤이 구현되어야 하는 경우,
그리고 그 영역의 컨텐츠도 보여줘야 할 때 유용하게 사용된다.
(물론 해당 영역의 컨텐츠가 크게 중요하지 않거나 별도의 페이지에 설명된 경우, 굳이 스크롤 인터랙션이 필요 없을 수도 있다.)
Axure 액슈어 따라하기 7.
영역 내 스크롤 구현하기
1. 좌측 라이브러리에서 Inline Frame을 가져온다.
이렇게!
inline frame을 원하는 위치에 배치하고 원하는 사이즈로 조절한다.
2. 이제 스크롤 영역에 보여줄 컨텐츠를 만들 차례.
컨텐츠를 만들 용도로 별도의 페이지를 만든다.
난 아래 이미지처럼, 주로 import용 화면들을 따로 만들어서 폴더에 모아놓는다.
이때 폴더명도 'import화면_기획자용' 등으로 지정해놓는다.
가끔 디자이너나 개발자들이 import인줄 모르고 물어보는 경우가 있기 때문!
3. 별도로 만든 import 페이지 안에, Inline Frame 안에 보여줄 컨텐츠를 만든다.
이때, 가로/세로 스크롤은 컨텐츠의 사이즈에 따라 자동으로 조절 되기 때문에
만약 가로스크롤만 생성하고싶다고 하면,
inline frame 사이즈에 맞게 컨텐츠의 세로사이즈를 그보다 작게.
세로스크롤만 생성하고 싶다면
컨텐츠의 가로사이즈를 frame 사이즈보다 작게.
만들어야 한다는 점!
3. 다시 Inline Frame 페이지로 돌아간다.
inline frame을 더블클릭하면, 레이어가 뜬다.
프레임에 임포트 할 화면 또는 링크를 선택하는 레이어!
Link to a page in this design이 선택된 상태.
여기서 아까 만들어둔 컨텐츠 페이지를 선택한다.
4. 그럼 이렇게 프레임 안에 컨텐츠가 표시되고, 스크롤이 구현된다.
난 가로 세로 스크롤 신경을 쓰지 않아서, 모든 스크롤이 구현되었지만
컨텐츠 사이즈를 조절하면 스크롤을 없애거나 생기게 할 수도 있다.
그런데 3번에서, external url 보신 분?
external url=외부 url. 즉,
액슈어에서는 이 프레임 안에 액슈어 페이지 뿐 아니라
외부 웹 링크도 구현이 가능하다는 것.
5. 역시나 프레임을 더블클릭 후, Link to an external url을 선택한다.
그리고 원하는 url을 입력하면 된다.
왼쪽이 직접 만든 컨텐츠, 우측이 url을 임포트 한 모습!
Inline frame을 이용하면 이렇게 컨텐츠를 쉽게 불러올 수 있다.
확실히 프로토타이핑에 가장 적합한 기획툴 중 하나인 액슈어!
'기획자로 사는 법 > 액슈어 도전기' 카테고리의 다른 글
| Axure 액슈어 따라하기 9. 클리핑 마스크 기능은 없나요? (0) | 2023.01.06 |
|---|---|
| Axure 액슈어 따라하기 8. 다이나믹 패널 인터랙션 심화편 : 로직 세팅 (0) | 2022.12.26 |
| Axure 액슈어 따라하기 6. 다이나믹패널을 이용해 라디오버튼 만들기 (0) | 2022.12.15 |
| Axure 액슈어 따라하기 5. 스크롤 이동 액션 (0) | 2022.12.05 |
| Axure 액슈어 따라하기 4. 다양한 텍스트 인터랙션 : Hover, 입력창 (0) | 2022.12.03 |