스윙 기능 도움말

이미지페이지 제작방법

925 views 2016년 6월 27일 2018년 1월 16일 root 6

이미지맵 제목

사용자 페이지 기능 [이미지 페이지 제작 방법] 매뉴얼

이미지페이지는 이미지에 원하는 형식의 특정 영역을 설정한뒤 링크를 적용하여 페이지가 이동하는 배너 스타일을 만들 수 있구요. 

특정 영역을 설정한 뒤 툴팁 메시지를 작성하여 보여줄 수 있습니다. 

즉 이미지 전체에 링크가 적용된 기존의 메뉴와 달리 사용자가 원하는 형태로 원하는 영역에 링크를 적용할 수 있습니다.

**활용 TIP

1. 이미지 [홈페이지 이동] 이라는 배너 위에, 웹링크를 설정하여 배너 영역을 선택했을 때 해당 웹 페이지로 이동이 가능하고자 할 때

2. 이미지 위에 좀 더 자세한 설명을 기재하고 싶을 경우, ‘툴팁’을 적용하여 마우스오버를 하면 부가설명이 나타도록 할 때

아직 어떻게 활용하면 좋을지 감이 오지않는다면, 도움말 포스팅을 통해서 이미지페이지 제작 방법을 배워보세요 ^^


]

▶ 이미지페이지 제작 – 동영상으로 배우기

1.이미지페이지 제작방법1 – 배너 스타일 제작하기

2.이미지페이지 제작방법2 – 툴팁 스타일 제작하기


f

STEP 1. 이미지페이지 추가하기
  • 앱제작 페이지> 사용자페이지> 이미지기반 페이지 추가를 선택합니다.

이미지기반페이지_18.1.16

1. 앱제작페이지의- 페이지 메뉴 단계로 이동합니다.

2. 메뉴: 사용자페이지 메뉴를 선택하고, 불러오기를 선택합니다.

3. 사용자페이지 창이 열리구요.

4. 여기서 [이미지 기반 페이지 추가] 를 선택해주세요.


STEP2. 이미지페이지 제작도구  – 웹 링크 적용하기 

이미지페이지2_18.1.16

스윙 [이미지 페이지]를 제작할 수 있는 작업 사이트입니다.

해당 화면에서 이미지를 추가한 뒤 여러가지 작업을 하실 수 있습니다. 이미지맵 제작방법에 대해서 알려드리겠습니다.

1. 이미지 등록하기

이미지맵3

가장 먼저 이미지를 등록하는 작업을 진행합니다.

이미지업로드 버튼을 선택해서, 등록하고자 하는 이미지를 선택해주세요.

2. 툴(tool) 선택하기

이미지맵 모양툴

이미지에서 원하는 해당 영역을 지정하기 위한 모양 툴을 선택합니다.

[모양 툴 종류]

녹화_2016_06_27_17_41_25_163

1.Spot : 여러 개의 점으로 영역을 설정할 수 있는 툴입니다. 

2.Rectangle: 사각형 모양으로 영역을 설정할 수 있는 툴입니다. 

3.Ellipse: 타원형 모양으로 영역을 설정할 수 있는 툴입니다. 

4.Polygon: 다각형 모양으로 영역을 설정할 수 있는 툴입니다. 

 

3. 영역 지정 후 링크 적용하기

이미지맵5

‘사각형 툴’을 선택해서 [SWING으로 앱제작&관리를 간편하게] 해당 배너 부분을 지정해보도록 하겠습니다.

툴 선택 후 해당영역을 드래그하면 밑의 이미지처럼 투명한 사각형이 만들어집니다.

 

★ 오른쪽 메뉴 바에 기재된 메뉴들을 확인해볼게요!

1. 링크 액션

링크 액션은 링크를 적용한 해당 영역이 어떻게 보여질지를 적용하는 메뉴입니다.

1) 마우스 오버 수정동작: 마우스를 갖다댔을 때 어떻게 작동할지를 적용하는 메뉴입니다.

[보기: 아무것도 안함, 툴팁보여주기] 링크만 적용할 것이기 때문에 [아무것도 안함]을 선택해주세요.

2) 클릭 수행동작: 마우스를 클릭했을 때 어떻게 작동할지를 적용하는 메뉴입니다.

[보기: 아무것도 안함, 툴팁 보여주기, 링크 이동] 선택시에 링크로 이동을 해야 하기 때문에 [링크 이동]을 선택해주세요.

3) 링크: 연동할 해당 웹페이지 링크를 입력합니다.

*[새창으로 이동하기]는 필요시에 선택해서 체크해주세요.

 

2.기본 스타일

툴로 지정한 영역의 스타일을 수정할 수 있는 메뉴입니다.

*해당 메뉴는 ‘투명도 설정’에 대해서만 설명드리겠습니다.

4) Background Opacity : 툴로 지정된 영역의 투명도를 지정할 수 있습니다.

마우스를 선택했을 때 해당 툴이 보이지 않기를 원한다면 투명도를 ‘0’으로 설정하면 됩니다.

컬러는 Background Color에서 원하는 색을 정한 뒤, 투명도를 원하는 만큼 설정하면 됩니다.

[저장] 버튼을 누르시면 해당 작업 내용이 저장이 됩니다.

링크가 적용된 모습은 앱 실행화면을 통해서 보여드리겠습니다.


STEP3. 이미지페이지 제작도구  – 툴팁 적용하기 
  • 툴팁은 이미지 위에 메시지창 모양의 아이콘을 첨부하여, 부가설명을 기재하는 방법으로 활용됩니다.

이미지맵 툴팁적용

웹링크 방법과 동일하게 툴팁을 적용할 영역에 툴 메뉴로 해당 영역을 드래그하여 선택해줍니다.

툴팁을 작성하는 메뉴들은 오른쪽에서 확인하가능하구요.

총 3가지 메뉴만 확인해주시면 됩니다.!!

1. 링크 액션

링크 액션은 툴팁을 적용한 해당 영역이 어떻게 보여질지를 적용하는 메뉴입니다.

1) 마우스 오버 수행동작: 마우스를 갖다대면 툴팁 내용이 보여야 하기 때문에 [툴팁보여주기] 보기를 선택합니다.

2) 클릭수행동작: 툴팁만 적용할 것이므로 [아무것도 안함] 보기를 선택합니다.

*활용 TIP. 툴팁 메뉴와 웹링크 메뉴 2가지를 다 사용하여 제작할 수 있습니다.

 

2. 텍스트 스타일

텍스트 스타일은 툴팁에 작성된 텍스트 색상, 글씨체, 폰트 사이즈, 툴팁 박스 사이즈 등을 수정할 수 있는 메뉴입니다.

 

3. 툴팁 내용

툴팁 박스에 들어갈 내용을 입력합니다. 툴팁은 타이틀(제목)과 텍스트(본문)로 나누어서 내용을 작성합니다.

완료된 뒤 [저장] 버튼을 눌러주세요. 적용된 툴팁을 확인할 수 있습니다.

툴팁적용화면

이미지에서 보이는 것처럼 지정된 해당 영역에 마우스를 갖다대면 작성된 툴팁 박스를 확인할 수 있습니다.


STEP4. 앱에 이미지페이지 적용하기
  • 이미지 제작도구에서 만든 이미지페이지를 앱에 적용시켜보겠습니다.

이미지맵9

1) [새 메뉴 추가] 버튼을 선택합니다.

2) 추가 된 메뉴에 대해서 이름을 기재합니다.

3) [사용자페이지] 메뉴를 선택합니다.

4) [불러오기] 버튼을 선택합니다.

5) 방금 제작도구로 만든 이미지페이지를  선택하고 [적용]버튼 선택해주세요.

6) 전체 메뉴에 적용될 수 있도록 하단의 [적용]버튼을 선택합니다.

7) 저장 버튼을 누르면 완료됩니다.


STEP5. 앱 실행화면 – 이미지페이지 적용화면
  • 이미지페이지가 앱에서 어떻게 적용되어 실행되는지 확인해보겠습니다. 

1. 이미지페이지- 적용된 링크 확인

이미지맵 11

툴로 지정핸놓은 해당 영역을 선택(터치)하면, 링크에 입력해놓은 해당 웹사이트로 페이지가 이동합니다.

툴로 지정되지 않는 부분을 선택하면 링크 반응이 없구요.

반드시 지정된 영역을 선택해야 링크가 정상적으로 작동합니다. 

 

2. 이미지페이지 – 툴팁 적용

이번에는 이미지맵에 적용된 툴팁에 대해서 확인해보겠습니다. 

이미지맵12

해당 메뉴로 이동하니 제작도구에서 설정해놓은 툴팁 박스가 지정된 영역 위에 뜨는 것을 확인할 수 있습니다. 

마우스 오버 시 해당 툴팁이 열리도록 설정해놓았기 때문에, 따로 이미지를 선택하지 않아도 툴팁이 보여집니다.

만약 ‘클릭 시 툴팁이 열리도록 한다면’, 해당 이미지 영역을 선택해야만 툴팁박스가 열립니다.


이미지의 특정 영역에 웹링크를 걸거나, 툴팁을 적용하고자 할 때 이미지페이지 메뉴를 활용해보세요 ^^

이미지페이지 제작 방법은 더욱 다양한 활용 TIP에 대해서 도움말에서 다룰 예정이니 많은 참고 부탁드립니다.

Was this helpful?