> For the complete documentation index, see [llms.txt](https://documentation.swing2app.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.swing2app.co.kr/manual/v2/pagemenu/imagepage.md).
# 사용자 페이지- 이미지 페이지
**사용자 페이지에서 제공하는 기능 중 \[이미지 페이지] 이용방법에 대해서 알려드리겠습니다.**
**▶****이미지페이지란?**
이미지페이지는 사용자가 직접 만드는 사용자editor 제작도구입니다.
이미지를 편집하여서 해당 이미지에 링크를 적용하고, 툴팁을 적용할 수 있습니다.
이미지에 다양한 링크를 적용할 수 있기 때문에 앱제작 시 유용하게 이용할 수 있습니다.
**▶****활용 TIP**
1\. 한 이미지에 여러 웹링크를 적용해야 할 때 ex) 홈페이지 가기, 블로그 가기 등 하나의 링크가 아닌 여러 링크 적용가능
2\. 한 이미지에 여러 게시판 링크를 적용 할 때 ex)공지사항게시판, 자유게시판 등 여러 게시판 링크 적용가능
3\. 이미지 위에 좀 더 자세한 설명을 기재하고 싶을 경우, ‘툴팁’을 적용하여 해당 메시지가 나오게끔 적용 가능
4\. 배너 작업 가능 – 배너스타일로 이미지를 만들어놓고, 해당 영역을 지정하여 링크 적용
**▶**** 이미지 페이지 제작시 홈화면에 가득찬 이미지로 넣고 싶다면, 모바일 화면 해상도 기준인 가로 1080px, 세로 1980\~2200px 사이즈로 맞추어서 작업해주세요.**
**★가로 사이즈에 맞게 세로 길이는 핸드폰 화면에 따라 조절이 됩니다.**
**따라서 세로는 어떤 프로토타입을 적용했는지, 핸드폰 기종에 따라서 세로 길이가 조금 남거나 짧을 수도 있어요.**
가로 사이즈로 고정되고, 세로는 모바일 환경에 따라 변경되기 때문에 모든 핸드폰에 동일한 화면이 보여질 수는 없습니다.
**이용시 참고해주세요\~**
**이미지 페이지 적용단계**
***
**이미지 페이지 적용 앱 실행화면**
**\*스윙투앱 공식앱 – 이미지 페이지 적용화면**
\*스윙투앱 공식앱에 적용된 이미지페이지 화면입니다.
-이미지 위에 영역을 선택하여, 해당 배너 영역마다 페이지를 연동했어요.
-앱 실행시, 이미지의 특정 배너를 선택하면 연동된 페이지로 이동하게끔 제작할 수 있습니다
**사용자 앱) 명덕외고앱 이미지페이지 적용화면**
**영상으로 확인하기 – 이미지페이지 제작방법**
{% embed url="" %}
###  **STEP 1. 이미지페이지 새로 만들기**
이미지 페이지 만들기는 앱제작 화면 상단에 \[사용자페이지 설정] 버튼을 선택하여 이용 가능합니다.
\[사용자페이지 설정] 버튼을 탭하고, **이미지맵** 메뉴 선택해주세요.
\[+새로만들기]를 클릭하면 페이지 제작도구 화면이 열립니다.
이미지 페이지 제작이 완료되면, 다시 앱에 적용하는 방법을 알려드릴게요!
***
###  **STEP 2. 이미지페이지 제작하기**
이미지페이지를 제작할 수 있는 제작도구 화면이 열립니다.
**1.이미지 등록하기**
가장 먼저 이미지를 등록해주세요.
**\[이미지 업로드]** 버튼 혹은 **\[새로만들기]** 버튼을 선택해서, **등록하고자 하는 이미지를 선택해주세요.**
\*이미지 페이지는 디자인이 된 이미지 위에 링크 등의 배너를 올리는 기능이기 때문에, 디자인 작업이 완료된 이미지로 올려주셔야해요!
> 처음 작업을 할 경우 \[새로 만들기] 버튼을 선택해서 작업하는 것이 좋구요.
>
> 기존에 작업을 한 내용 물 외에 수정된 이미지를 다시 올려야 할 경우 \[이미지 업로드] 버튼을 이용하는 것이 좋아요 !
**2. 이미지 페이지 제작**
이미지 페이지 작업은
**이미지 위에 배너 영역을 설정하는 ‘도형 툴’, 영역에 링크를 연결할 수 있는 ‘링크 액션’, 영역 스타일을 설정하는 ‘기본 스타일’만 확인해주시면 됩니다.**
> **★기본 스타일**
>
> -Background Color : 툴로 설정한 영역에 색을 입힐 수 있구요.
>
> -Background Opacity : 툴로 설정된 영역의 투명도를 지정할 수 있습니다.
>
> 마우스를 선택했을 때 해당 툴이 보이지 않기를 원한다면 투명도를 ‘0’으로 설정하면 됩니다.
### 
**3. 도형툴 – 스타일 확인하기**
**툴 모양은 점모양 ,사각형, 타원형, 다각형으로 제공됩니다.**
-점모양을 이용할 때는 이미지 위에 마우스 커서를 클릭하면 점이 생깁니다.
-사각형, 타원형 모양을 이용할 때는 이미지 위에 마우스 커서를 놓고 왼쪽에서 드래그해서 영역을 만들어주면 됩니다.
-다각형의 경우 여러 영역에 점을 찍고, 다시 처음에 점을 찍은 곳으로 점을 찍면 다각형 영역이 만들어집니다.
**▶** **움짤 이미지를 통해서 영역을 설정하는 방법을 확인해주세요**
**4. 링크 적용하기**
영역을 설정했다면 설정한 영역 안으로 링크를 적용하는 방법을 확인해볼게요.
**링크는 오른쪽의 \[링크 액션]을 선택해서 적용해주세요.**
1\) 마우스 오버 수정동작: 마우스를 갖다댔을 때 어떻게 작동할지를 적용하는 메뉴입니다.
\[보기: 아무것도 안함, 툴팁보여주기] 링크만 적용할 것이기 때문에 \[아무것도 안함]을 선택해주세요.
2\) 클릭 수행동작: 마우스를 클릭했을 때 어떻게 작동할지를 적용하는 메뉴입니다.
\[보기: 아무것도 안함, 툴팁 보여주기, 링크 이동] 선택시에 링크로 이동을 해야 하기 때문에 \[링크 이동]을 선택해주세요.
3\) 링크마법사: 연동할 앱 메뉴, 웹링크 등의 페이지 등을 선택할 수 있는 도구입니다.
링크마법사 버튼을 선택하면 위의 이미지처럼 ‘링크마법사’ 창이 뜹니다.
여기서 해당 배너를 선택했을때 이동할 메뉴를 선택하면 됩니다.
**\*주의사항**
**앱 내의 메뉴 및 컨텐츠는 작업을 다 완료해주셔야 합니다.**
**게시판이나 사용자 페이지 등의 작업이 다 안되어 있다면 링크 마법사에서 선택할 수 있는 메뉴가 없겠죠?**
**따라서 앱에 들어갈 컨텐츠 제작을 모두 완료한 뒤 이미지 페이지에서 링크 마법사를 이용해주세요.**
해당 매뉴얼에서는 이미지의 소개 배너를 선택했기 때문에, 웹템플릿으로 작업해놓은 ‘스윙카페소개’ 템플릿을 선택할게요.
\[반영]을 선택해주시면 됩니다.
당연히\~ 링크마법사에서는 위의 메뉴 외에도 다른 메뉴들로 모두 적용이 가능합니다.
예를 들어 **배너를 선택했을때 블로그로 이동하게 하고 싶다고 할 때는 ****\[링크마법사] 선택 후 \[웹링크]에서 – 블로그 사이트 주소 URL 입력 후 반영해주시면 됩니다.**
**▶****움짤로 이미지페이지 제작방법 확인하기**
**마우스 오버 스타일****을 이용하여 Background Color 에서 컬러를 입힐 수 있구요.**
**Background Opacity 에서 ‘0’으로 설정하면 배너를 투명하게 설정할 수도 있습니다.**
**▶****이미지 페이지 제작 TIP**
TIP을 한가지 드리면요
리스트에서 **\[스타일 복제 버튼]**을 이용하면, **동일한 영역 스타일과 기본 스타일을 그대로 가져올 수 있습니다.**
링크 설정만 변경을 하면 되니, 좀 더 간편하게 만들 수 있어요!
**5. 제작 완료**
이미지페이지 적용이 완료되었구요
마지막으로 페이지 이름 입력 해주세요. (앱에 적용시 해당 페이지이름으로 메뉴에 표시됩니다.)
저장 버튼 누르면 완료됩니다.
그럼 다시 앱제작 페이지로 돌아가서 앱에 해당 이미지페이지를 적용해볼게요!!
***
###  **STEP.3 앱에 이미지페이지 적용하기**
이미지 페이지를 제작한 뒤, 다시 페이지메뉴로 이동합니다.
1\)\[홈 화면]메뉴를 마우스로 클릭합니다.
\*저는 홈화면을 선택해서 템플릿 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요.
따라서 적용하고자 하는 카테고리를 추가한 뒤 템플릿 페이지를 적용해주세요.
2\)메뉴명은 변경 하지 않아도 됩니다.
\*중요\* 이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.
3\)메뉴 유형에서 \[사용자 페이지]메뉴를 선택합니다.
4\) \[링크마법사] 버튼을 선택합니다.
5\)링크 마법사 창에서 \[이미지맵] 메뉴 선택
6\)홈화면에 적용할 이미지 페이지 선택 후 \[반영] 버튼 선택
만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!
7\)페이지 하단의 \[적용] 버튼을 누르고
8\)\[저장] 버튼을 누르면 완료
\*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다.
**▶** **움짤로 적용방법 확인하기**
***
.
.
###  **STEP.4 이미지페이지 제작도구 – 툴팁 적용하기**
이미지페이지에 링크 배너를 연동하는 것 외에 툴팁을 적용하는 방법도 알려드릴게요
**툴팁이란?**
**툴팁은 이미지 위에 메시지창 모양의 아이콘을 첨부하여, 부가설명을 기재하는 방법으로 활용됩니다.**
**▶** **툴팁 적용 예시)**
**1. 이미지 페이지- 툴팁 적용방법**
이미지페이지 제작도구에서 \[새로들기] 버튼을 선택한 뒤 이미지를 불러와주세요.
**1)이미지 위에 툴팁을 적용할 영역에 툴 메뉴로 해당 영역을 드래그하여 선택해주세요.**
—오른쪽 메뉴 바에서 이용할 메뉴들을 설명해드릴게요—
**2) 링크액션**
링크 액션은 툴팁을 적용한 해당 영역이 어떻게 보여질지를 적용하는 메뉴입니다.
(1) 마우스 오버 수행동작: 마우스를 갖다댔을 때 어떻게 작동할지를 적용하는 메뉴입니다. \[아무것도 안함]을 선택해주세요.
(2) 클릭 수행동작: 마우스를 클릭했을 때 어떻게 작동할지를 적용하는 메뉴입니다.
터치를 하면 툴팁이 보여져야 하기 때문에 클릭수행동작에서 \[툴팁 보여주기]를 선택해주세요.
**\*활용 TIP. 툴팁 메뉴와 웹링크 메뉴 2가지를 다 사용하여 제작할 수 있습니다.**
**3)기본 스타일**
툴 영역 스타일인데요. 해당 옵션은 백그라운드 컬러, 백그라운드 투명도만 확인해주세요.
툴팁이 보여질 영역이 보이게 할 경우 색상 및 투명도를 넣어주시구요.
영역을 안보이게 할 경우 Background Opacity(투명도)를 ‘0’ 으로 해주세요.
**4) 툴팁 스타일**
툴팁 스타일을 입력하는 메뉴이구요. -> 메시지가 보이는 박스 영역 디자인
가로&세로 사이즈 수정, 컬러, 툴팁 위치, 투명도, 영역 라운딩 정도를 설정할 수 있습니다.
\*주의\* 사이즈 수정시 가로 길이는 330을 넘지 않도록 해주세요.(최대 330px)
**5) 텍스트 스타일**
텍스트 스타일은 툴팁에 작성된 텍스트 색상, 글씨체, 폰트 사이즈, 툴팁 박스 사이즈 등을 수정할 수 있는 메뉴입니다.
제목 영역과 본문 영역을 나눠서 수정할 수 있어요.
**6) 툴팁 내용**
툴팁 박스에 들어갈 내용을 입력합니다. 툴팁은 타이틀(제목)과 텍스트(본문)로 나누어서 내용을 작성합니다.
**7) 페이지 이름 입력해주세요** \*페이지 이름 입력은 내용 모두 저장 후 입력해주셔도 됩니다.
**8) 완료된 뒤 \[저장] 버튼을 눌러주세요.**
9\) \[미리보기]를 선택하면 이미지 위에 적용된 툴팁 박스를 확인할 수 있습니다.
**2. 툴팁 적용한 이미지 페이지 앱에 적용하기**
툴팁으로 제작한 이미지페이지도 앱에 적용할 수 있습니다.
앱에 적용하는 방법은 위에서 알려드린 방법과 동일합니다.
**—–이미지 페이지를 제작한 뒤, 다시 페이지메뉴로 이동합니다.**
1\)\[홈 화면]메뉴를 마우스로 클릭합니다.
\*저는 홈화면을 선택해서 템플릿 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요.
따라서 적용하고자 하는 카테고리를 추가한 뒤 템플릿 페이지를 적용해주세요.
2\)메뉴명은 변경 하지 않아도 됩니다.
\*중요\* 이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.
3\)메뉴 유형에서 \[사용자 페이지]메뉴를 선택합니다.
4\)\[링크마법사] 버튼을 선택합니다.
5\)링크 마법사 창에서 \[이미지맵] 메뉴 선택
6\)홈화면에 적용할 이미지 페이지 선택 후 \[반영] 버튼 선택
만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!
7\)페이지 하단의 \[적용] 버튼을 누르고
8\)\[저장] 버튼을 누르면 완료
\*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다.
**3. 앱 실행화면) 이미지 페이지 툴팁**
