스윙투앱 도움말
문의하기앱 제작하기
  • 스윙투앱
  • 스윙투앱 이용 안내
  • [웹앱] 스윙투앱 강점
  • [일반앱] 스윙투앱 강점
  • 스토어 유지보수
  • 커스터마이징(앱개발 서비스)
  • 스윙투앱 업데이트
  • 스윙투앱 업데이트 히스토리
  • 자주 묻는 질문 FAQ
    • 가장 많이 묻는 질문 FAQ
    • 앱제작 FAQ
    • 앱운영 및 기능 FAQ
    • 앱 설치 및 다운로드 FAQ
    • 결제/이용권 FAQ
      • 일반 결제 문의 FAQ
      • 구독형 이용권 FAQ
      • 무제한 이용권 FAQ
      • 업로드티켓 FAQ
      • 패키지상품 FAQ
      • 플러그인 상품 FAQ
    • 푸시 발송 관련 FAQ
    • 플레이스토어 FAQ
    • 앱스토어 FAQ
    • 애드몹 FAQ
    • 제휴프로그램 FAQ
    • 커스터마이징 관련 FAQ
    • 스윙샵(스윙쇼핑몰) FAQ
    • 계정-회원가입,로그인 FAQ
    • 앱 미리보기 FAQ
    • 스토어 유지보수 컨설팅 FAQ
    • 구글플레이 개발자 계정 FAQ
  • 일반프로토타입 앱 매뉴얼
    • 앱제작 매뉴얼(V3)
      • V3 앱제작 마법사 시작
      • V3버전 앱제작 방법 매뉴얼
      • STEP1 기본정보
        • 앱아이콘 이미지 제작 가이드
        • 대기화면 이미지 제작 가이드
      • STEP2 디자인
      • STEP3 페이지
        • 앱 홈화면 제작방법
        • 메뉴 아이콘 이미지 등록하기
        • 앱 메뉴 비활성화 이용방법
        • 메뉴 권한 설정: 접근 권한
        • 페이지 기능 - UI KIT
        • 페이지 기능 - 쇼핑몰 기능 페이지
        • 페이지 기능 - 쇼핑몰 상품
        • 페이지 기능 - 상품카테고리
        • 페이지 기능 - 업종별 템플릿
        • 페이지 기능 - 이미지 페이지
        • 페이지 기능 - HTML에디터 페이지
        • 페이지 기능 - 회원가입, 로그인, 설정
        • 페이지 기능 - 게시물 검색
        • 페이지 기능 - 관심글 보기
        • 페이지 기능 - 쿠폰조회하기
        • 페이지 기능 - 앱공유하기
        • 페이지 기능 - 앱소개
        • 페이지 기능 - 관리자 채팅
        • 페이지 기능 - 채팅목록
        • 페이지 기능 - 설문조사
        • 페이지 기능 - 나의 글 보기
        • 페이지 기능 - 출석체크
        • 페이지 기능 - 링크
      • STEP4 앱제작하기
        • 앱 추가 제작방법
        • 앱 업데이트 방법
        • 업데이트 유형별 앱 실행화면
        • 디바이스 모드 설정(앱 화면 전환)
        • 앱 리뷰 버튼
        • 앱 로딩 아이콘 변경
      • 앱 업데이트 방법
    • 앱제작 메뉴얼(V2)
      • 앱 기본정보
        • 앱제작 방법 매뉴얼
        • 앱 업데이트 방법
        • 푸시, 웹뷰버전 앱제작방법(초간단 앱제작)
        • 웹뷰앱 매뉴얼(제작 및 운영)
        • 푸시앱 매뉴얼(제작 및 운영)
        • 푸시앱 툴바 제거
        • 업데이트 유형별 앱 실행화면
        • 앱 추가제작
        • 앱아이콘 이미지 제작 가이드
        • 대기화면 이미지 제작 가이드
        • 앱 이미지 사이즈 편집도구
      • 디자인테마
        • 프로토타입 UI디자인
        • 앱 메인 디자인 스타일
        • 앱 내비게이션 스타일
        • 슬라이드 프로토타입 응용
      • 페이지메뉴
        • 페이지메뉴-메인메뉴 관리
        • 앱 홈화면 제작방법
        • 홈화면:앱소개 페이지 적용하기
        • 웹링크 메뉴 이용방법
        • 파일 첨부 이용방법
        • 이미지 첨부 이용방법
        • 웹링크 링크마법사 이용방법
        • 상품카테고리 이용방법
        • 사용자페이지 이용방법
        • 사용자 페이지- 이미지 페이지
        • 사용자 페이지- 웹 템플릿 페이지
        • 사용자 페이지- HTML에디터 페이지
        • 스윙 페이지 - 회원가입, 로그인, 설정
        • 스윙페이지 - 게시물 검색 기능
        • 스윙페이지 - 관심글보기 이용방법
        • 스윙페이지 - 쿠폰조회하기
        • 스윙페이지 - 앱공유하기
        • 스윙페이지 - 앱소개
        • 스윙페이지 - 관리자채팅
        • 스윙페이지 - 채팅목록
        • 스윙페이지 - 설문조사
        • 스윙페이지 - 나의글보기 이용방법
    • 앱제작 응용 TIP(V2)
      • 푸시 API를 이용하여 푸시 발송하기
      • 홈화면 GIF이미지 넣기
      • 플래시 스타일 홈화면 만들기
      • 앱 로딩 아이콘 변경하기
      • 디바이스 모드 설정(앱 화면 전환)
      • 앱 리뷰 버튼 이용방법
      • 카카오톡 앱공유-앱 셋팅 방법
    • 앱운영 매뉴얼
      • 내 메뉴
        • 앱 활동 모음
        • 앱 제거(삭제)방법
        • 내 정보 수정
      • 게시판관리
        • 게시판 만들기
        • 게시판 종류, 디자인스타일
        • 게시판 날짜 형식 설정 방법
        • 게시판 - 게시물 입력방법
        • 게시판 - 게시물 예약 설정
        • 게시판 고급설정 - 게시물 상세 옵션 설정
        • 게시물 정렬 순서 설정 방법
        • 게시판 - 파일 첨부하기 (관리자용)
        • 앱에서 게시판 파일 첨부하기
        • 게시판 - 동영상 등록하기(영상 등록방법)
        • 게시판-오디오파일 첨부방법
        • 게시물 댓글, 대댓글 입력방법
        • 게시판 권한 설정 이용방법
        • 게시판 작성폼 이용방법
        • 게시판 작성글 이용방법
        • 게시판: 목록화면, 작성화면 이용방법
        • 게시판 새글알람 설정방법
        • 게시판 관리자 설정
        • 위치등록(지도)게시판
        • 위치등록(지도)게시판 버튼명 수정
        • 위치등록(지도)게시판 고급설정
        • 구글맵(구글지도)게시판
        • 구글맵 API키 발급하기
        • HTML에디터글쓰기
        • 게시물 신고 및 관리
        • 게시물 차단하기
        • 회원등급별 게시판 만들기
        • 게시판 섬네일 이미지 등록
        • 게시물 검색 기능
        • 게시물관리 옵션 기능
        • 일괄등록 게시판 이용방법
        • 복합게시판
        • 게시판 복사
        • 게시물 복사
        • 게시물 이동
        • 게시물 일괄 삭제
        • 그룹채팅
        • 그룹채팅 기능 소개
        • 비밀게시판 만들기(1:1 고객센터)
        • 게시물 링크 생성하기
        • 캘린더 이용방법
        • 캘린더 응용-활용방법
        • 스탬프 이용 및 등록방법
        • 스탬프 응용: 스탬프 완료시 쿠폰발행하기
        • 게시판 헤더 이용방법
        • 해시태그 2가지 이용방법
        • 해시태그 검색옵션 이용방법1
        • 해시태그 검색옵션 이용방법2
        • 게시글 다운받기(게시물 다운)
      • 서비스관리
        • 팝업 이용방법
        • 출석체크
        • 설문조사
        • 리소스관리- 용량관리
        • 쿠폰관리: 쿠폰만들기, 발행하기
        • 관리자채팅 [1:1 채팅] 이용방법
        • 채팅 관리자 페이지 (웹 대시보드용)
        • 채팅 관리자 페이지 - 채팅설정
        • 통합 알림 설정
        • 앱 정책관리 - 앱 가입 정책
        • 앱 정책관리 - 회원가입 양식
        • 회원가입 양식 - 아이디 설정
        • 회원가입 양식 - 외부 로그인 연동
        • 회원가입 양식 - 가입 항목 추가하기
        • 앱 정책관리- 회원가입 완료 메시지 설정
        • 앱 이용약관, 개인정보취급방침
        • 비공개 앱만들기
        • 앱 등록 기기수
        • 앱 고급 관리
        • 안드로이드 앱 패키지 아이디 변경
        • API-KEY 관리 페이지
        • 앱 문자열 관리
        • 엡에 셋팅된 문구(메시지) 수정 방법
        • 앱 신고 관리
        • 앱스토어 리뷰 관리
        • 애드몹 플러그인 설정
        • 링크마법사
        • 접근 권한 제어
        • 브랜드관리 - 라벨 사용
      • 푸시&회원 메뉴
        • 푸시 발송하기
        • SMS 발송 이용방법
        • 푸시 알림 방식 확인
        • 게시물 푸시발송하기
        • 푸시 알림 확인 후 메시지 표시
        • 푸시 알림 이용방법
        • 푸시 히스토리
        • 푸시 아이콘 이미지 가이드라인
        • 푸시 아이콘 이미지 등록
        • 아이폰 푸시 인증서 연장
        • 회원조회 - 회원정보 확인
        • 회원조회 - 부관리자 설정 및 로그인 방법
        • 회원조회 - 회원 생성하기
        • 회원 이름 변경 *관리자 권한 변경
        • 앱 관리자 설정하기
        • 권한그룹설정 - 회원 등급
        • 푸시 장치 관리
      • 통계
      • 버전관리
        • 버전관리- 앱제작이력, 마켓등록기록, 마켓등록관리
        • 앱스토어 업로드 신청방법
        • 플레이스토어 업로드 신청방법
        • 모바일웹 업로드 신청방법
      • 결제, 유료 상품
        • 결제- 내 결제현황 이용방법
        • 1,000건 SMS 발송 티켓 이용방법
        • 모바일웹 이용방법
        • 웹뷰 무제한 유료앱
        • 푸시 무제한 유료앱
        • 알뜰형 패키지(12개월)
        • 애드몹 파워 패키지(12개월)
        • 대용량 패키지(12개월)
        • 결제-쿠폰사용하기
        • 세금계산서, 현금영수증 발행요청하기
        • 유료상품 취소 및 환불 정책
      • 전체검색기능
  • 스윙샵 - 쇼핑몰 기능
    • 스윙샵-스윙쇼핑몰
      • 스윙샵(스윙 쇼핑몰) 신청방법
      • 스윙샵 상품유형
      • 스윙샵에서 제공하는 페이지 소개
      • 쇼핑몰 앱 홈화면 구성방법
      • 스윙샵-쇼핑몰앱 결제화면
      • 스윙샵-쇼핑몰 메인페이지 이용방법
      • 스윙샵-쇼핑몰 메인페이지 이미지 슬라이드
      • 상점관리-결제모듈관리
      • 상점관리-결제수단별 실행화면
      • 상점관리-기본정보설정
      • 상점관리-배송관리
      • 상점관리-정책설정하기
      • 상품등록-상품카테고리 등록
      • 상품등록-실물 상품 등록
      • 상품등록-상품수령방법 설정하기
      • 상품등록-디지털제품: 권한 변경 상품
      • 상품등록-디지털제품: PDF파일 등록
      • 상품등록-디지털제품: 영상파일 등록
      • 상품등록-디지털제품: 쿠폰 등록
      • 상품등록-예약시스템 날짜 예약상품 등록
      • 상품등록-예약시스템 시간 예약상품 등록
      • 상품수정-등록한 상품 수정하기
      • 상품관리-상품게시물관리
      • 상품관리-상품조회, 예약상품조회
      • 상품관리-상품노출관리
      • 주문관리 이용방법
      • 예약주문관리 이용방법
      • 상점통계 이용방법
      • 스윙페이지-쇼핑몰정보
      • 스윙페이지-상품검색
      • 스윙페이지-카테고리 리스트
      • 스윙페이지-마이페이지
      • 스윙페이지-장바구니
      • 스윙페이지-디지털상품 구매완료 페이지
  • 웹앱-웹뷰,푸시앱 매뉴얼
    • 웹뷰앱&푸시앱
      • 스윙투앱 웹뷰앱
      • 스윙투앱 푸시앱
      • 웹뷰앱 매뉴얼
      • 푸시앱 매뉴얼
      • 푸시앱, 웹뷰앱 초간단 제작방법
      • 최초 실행 주소 이용방법
      • 기본 옵션: 웹뷰 기능
      • 기본 옵션: 안드로이드 권한
      • 기본 옵션: 추가 기능(푸시앱)
      • 고급 옵션: 색상 설정(푸시앱)
      • 고급 옵션: 시스템 폰트
      • 프로그레스바 색상 설정
      • 프로그레스바 제거(사용하지 않음)
      • 앱 종료 알림 메시지
      • 권한 유형 설정
      • 부관리자 설정(푸시,웹뷰앱)
      • 안드로이드 앱 패키지 아이디 변경
      • 푸시앱 [툴바] 이용방법 및 기능 소개
      • 푸시앱 [메뉴] 리스트 수정 방법
      • 푸시 아이콘 이미지 등록하기
      • 푸시앱에서 푸시발송하기
      • 푸시테스트발송 - 푸시 장치 관리
      • [푸시앱] App Id, App Key
  • 앱 이용 가이드
    • 스윙투앱 브라우저 앱 이용방법
    • 어플리케이션 운영
      • 유료앱 전환 및 스토어 업로드 신청방법
      • 미리보기 이용방법
      • APK파일 받기 (앱 다운)
      • AAB파일 받기
      • 공유하기로 앱 설치하는 방법
      • 앱 설치 링크주소로 앱 다운받기
      • 모바일 스윙투앱 사이트 접속 후 앱 다운받기
      • 무료버전앱(APK파일) 설치가 안된다면 확인해주세요!
      • 유료버전앱(APK파일) 설치가 안된다면 확인해주세요!
      • 유료앱 기간 종료 후 무료앱 전환방법
      • 앱 비밀번호 찾기
      • 앱 프로필 사진 등록 및 변경하기
      • 앱 회원탈퇴 후 동일 아이디 재가입 방법
      • 게시판, 게시물 공유하기
      • 앱 관리자 메뉴 :관리자 로그인
      • 앱 관리자메뉴:채팅
      • 앱 관리자메뉴:스탬프 등록
      • 앱 관리자메뉴:쿠폰사용
    • 앱 미리보기 이용방법
  • 프로그램 및 컨설팅
    • 제휴프로그램
      • 제휴프로그램 소개
      • 제휴프로그램 신청방법
      • 제휴프로그램 약관
      • 제휴프로그램 홍보방법
    • 타사 앱 서비스 이전 문의
  • 스토어
    • 스토어 이용약관
      • 플레이스토어 업로드 대행 약관
      • 앱스토어 업로드 대행 약관
      • 플레이스토어 등록 불가 앱(컨텐츠, 업종)
      • 앱스토어 등록 불가 앱(컨텐츠, 업종)
      • 앱스토어, 플레이스토어 등록 주의사항
      • 애플 개발자 계정 대리 등록 주의사항
      • 앱스토어 주요 정책 이슈
      • 플레이스토어 주요 정책 이슈
    • 개발자 계정 자주 묻는 질문
      • 구글 개발자계정 자주 묻는 질문
      • 애플-앱스토어 자주 묻는 질문
      • 구글 개발자 계정 생성 방법
      • 애플 개발자 계정 생성 방법
      • 애플 개발자 계정 갱신(멤버십 연장)
    • 플레이스토어
      • 구글 플레이 정책
        • 민감한 권한 API: 쿼리 권한 정책
        • 앱 액세스 권한
        • 사용자 제작 콘텐츠(UGC)
        • 데이터 보안
        • 아동 안전 표준 정책
        • 개인정보 링크 연결하기
        • 플레이스토어 사전고지 문서(증빙서류)
      • 비공개 테스트
        • 비공개 테스트 등록
        • 비공개 테스트 승인 완료 프로덕션 출시
        • 비공개 테스트 가이드 및 주의사항
        • 비공개 테스트 FAQ
      • 플레이스토어 앱 등록 매뉴얼
      • 플레이스토어 앱 업데이트
      • 구글 개발자-개인 계정 만들기
      • 구글 개발자 개인 계정 인증
      • 구글 개발자-조직 계정 만들기
      • 구글 개발자 조직 계정 인증
      • 구글 개발자-조직 웹사이트 인증
      • 구글 개발자 계정 초대
      • 플레이스토어 앱 등록 준비사항
      • 플레이스토어 스크린샷 이미지
      • [웹앱] 플레이스토어 심사 거절 사례
      • 플레이스토어 앱 심사 거절 사례
      • 플레이스토어 앱 출시 링크 확인 방법 ​
      • 플레이스토어 앱 게시취소
      • 구글 플레이 개발자 이름 변경
      • 구글 플레이 개발자 연락처 정보 변경
      • 구글 개발자 거래 ID 확인
      • 다른 개발자계정으로 앱 이전하기
      • 플레이스토어 앱 검색 TIP
      • 플레이스토어 앱 설치수 확인하기
      • 플레이스토어 개발자 페이지
      • 플레이스토어 출시 후 관리 페이지
      • 플레이스토어 출시된 앱 업데이트 받는 방법
      • 플레이스토어 앱 자동업데이트 설정하기
      • 플레이스토어 이의제기(앱 복원방법)
      • 플레이스토어 앱 리뷰에 답글 달기
      • Google Play Console 지원팀 문의하기
      • 구글 플레이 개발자 계정 인증 기한 선택
      • 구글 개발자 계정 확인 기한 '개인' 계정 인증
      • 구글 개발자 계정 확인 기한 '조직' 계정 인증
      • 플레이스토어 등록된 앱 삭제
      • 플레이스토어 운영 가이드
      • 구글 계정 만들기
      • 구글 플레이 개발자 계정 환불
    • 앱스토어
      • 애플 계정 만들기
      • 앱스토어 애플 개발자계정 등록(개인)
      • 앱스토어 애플 개발자계정 등록(기업)
      • 애플 개발자 계정 멤버십 연장(갱신)방법
      • 앱스토어 앱 등록 준비사항
      • 앱스토어 스크린샷 이미지
      • 앱스토어 업로드 신청방법
      • 앱스토어 앱 심사 거절 대표 사례
      • [웹앱] 앱스토어 앱 심사거절 사례
      • 아이폰 푸시 인증서 연장
      • TestFlight 앱출시 방법
      • TestFlight 앱 연장방법
      • Apple Developer Enterprise Program
      • 애플 개발자 계약 업데이트
      • 앱스토어 API 인증서 등록하기
      • 앱스토어 아이폰 푸시 인증서 등록
      • 애플 앱스토어 고객센터 이용방법
      • 앱스토어 앱 출시 링크 확인하는 방법
      • 애플 계정 사용자 초대
      • 앱스토어 앱 이전
      • 앱스토어 출시된 앱 삭제하기
      • 앱스토어 앱설치수 확인하기
      • 앱스토어 리뷰/ 평점 관리
      • 앱스토어 출시 후 관리 페이지
      • 앱스토어 '디지털 서비스법 규정' 조치방법 안내
      • Apple Developer Enterprise Program
    • 원스토어
      • 원스토어 앱 등록 방법
      • 원스토어 앱 업데이트하기
      • 원스토어 출시된 앱 판매중지하기
    • 갤럭시스토어
      • 갤럭시스토어 앱 등록 및 출시
      • 갤럭시스토어 앱 업데이트하기
    • 애드몹(구글 애드몹 광고)
      • 애드몹 플러그인 설정이란?
      • 애드몹 예상 수익 계산기
      • 애드몹 가입방법, 광고단위 아이디 만들기
      • 애드몹 플러그인 광고 셋팅
      • 애드몹 - 테스트 아이디 설정
      • 애드몹 - 광고 노출 권한 설정
      • 애드몹 배너광고 노출빈도 설정
      • 애드몹 - app-ads.txt 파일 설정하기
      • 애드몹-스윙투앱 계정 초대하기
      • 애드몹 운영 주의사항
      • 애드몹 광고 셋팅 주의사항
      • 앱미리보기 이용방법
    • 인앱(In-App)
      • 인앱(In-app)이란?
      • 인앱 주의사항
      • [구글] 결제 프로필 설정 방법
      • [구글] 플레이스토어 인앱 상품 등록
      • [구글] 플레이스토어 인앱 환불, 취소
      • [구글] 인앱 판매자 계좌정보 입력
      • [애플] 은행 계좌 등록 및 수정방법
      • [애플] 앱스토어 인앱 상품 등록
  • 개발자 문서
    • AppLink 연동
      • 안드로이드 AppLink 연동하기
      • iOS앱 Universal Links 적용하기
    • Server Side API 명세서
      • 푸시 API를 이용하여 푸시 발송하기
      • 푸시알림 목록 가져오기
      • 푸시알림 읽지 않은 메시지 Count
      • 푸시알림 읽음처리 API
    • 웹뷰(웹뷰,푸시전용) 개발도구
      • 웹뷰에서 구글, 페이스북 로그인 구현하기
      • 웹사이트 회원 연동 가이드
        • 워드프레스 웹사이트 회원 연동 가이드
        • Wix 웹사이트 회원 연동 가이드
        • 카페24(Cafe24) 웹사이트 회원 연동 가이드
        • 아임웹 웹사이트 회원 연동 가이드
      • Javascript 웹뷰 API 문서
        • API 를 활용한 예제
        • Meta SDK 활용하기
        • 안드로이드 인앱결제 구현하기
        • iOS 인앱결제 구현하기
    • Firebase 연동
      • Firebase 프로젝트 연동하기(안드로이드)
      • Firebase 프로젝트 연동하기(iOS)
      • Dynamic Links 연동
    • 애플 개발자 계정 등록 프로세스
    • DUNS 번호 발행 방법
    • DUNS 번호 조회방법
    • 네이버 로그인 API 연동
    • 카카오 로그인 API 연동
    • 구글 로그인 API 연동
  • 이용약관
    • 스윙투앱 이용약관
    • 스윙투앱 개인정보 처리방침
    • 스윙투앱 어플리케이션 개인정보 처리방침
    • 스윙투앱 교육용 라이선스
    • 무료앱 설치 기기수 제한
    • 이용제한 이용자 안내
    • 아동 안전 표준 정책
Powered by GitBook
On this page
  • 이미지 페이지 적용 단계
  • 이미지 페이지 적용 사례
  • STEP1. 시작하기
  • STEP2. 제작하기(제작도구)
  • 1.이미지 등록하기
  • 2.이미지 페이지 제작
  • 3.도형툴 – 스타일 확인하기
  • 4.링크 적용하기
  • 5.제작 TIP - 스타일 복제
  • 6.제작 TIP - 배경색 추가하기
  • 7.제작 완료
  • STEP3. 앱에 적용하기(이미지페이지 앱 적용)
  • STEP4. 이미지페이지 제작도구 – 툴팁 적용하기
  • 1. 툴팁 적용방법
  • 2. 툴팁 적용한 이미지 페이지 앱에 적용하기
  • 3. 앱 실행화면) 이미지 페이지 툴팁
  • STEP5. 편집하기(이미지페이지 수정 방법)
Edit on GitHub
  1. 일반프로토타입 앱 매뉴얼
  2. 앱제작 매뉴얼(V3)
  3. STEP3 페이지

페이지 기능 - 이미지 페이지

Previous페이지 기능 - 업종별 템플릿Next페이지 기능 - HTML에디터 페이지

Last updated 1 year ago


이미지페이지란?

이미지페이지는 사용자가 직접 만드는 사용자editor 제작도구입니다.

이미지를 편집하여서 해당 이미지에 링크를 적용하고, 툴팁을 적용할 수 있습니다.

이미지에 다양한 링크를 적용할 수 있기 때문에 앱제작 시 유용하게 이용할 수 있습니다.

활용 TIP

1. 한 이미지에 여러 웹링크를 적용해야 할 때 ex) 홈페이지 가기, 블로그 가기 등 하나의 링크가 아닌 여러 링크 적용가능

2. 한 이미지에 여러 게시판 링크를 적용 할 때 ex)공지사항게시판, 자유게시판 등 여러 게시판 링크 적용가능

3. 이미지 위에 좀 더 자세한 설명을 기재하고 싶을 경우, ‘툴팁’을 적용하여 해당 메시지가 나오게끔 적용 가능

4. 배너 작업 가능 – 배너스타일로 이미지를 만들어놓고, 해당 영역을 지정하여 링크 적용

이미지 페이지 제작시 홈화면에 가득찬 이미지로 넣고 싶다면, 모바일 화면 해상도 기준인 가로 1080px, 세로 1980~2200px 사이즈로 맞추어서 작업해주세요.

★가로 사이즈에 맞게 세로 길이는 핸드폰 화면에 따라 조절이 됩니다.

따라서 세로는 어떤 프로토타입을 적용했는지, 핸드폰 기종에 따라서 세로 길이가 조금 남거나 짧을 수도 있어요.

가로 사이즈로 고정되고, 세로는 모바일 환경에 따라 변경되기 때문에 모든 핸드폰에 동일한 화면이 보여질 수는 없습니다.

이용시 참고해주세요~


*스윙투앱 공식앱 – 이미지 페이지 적용화면

*스윙투앱 공식앱에 적용된 이미지페이지 화면입니다.

​

-이미지 위에 영역을 선택하여, 해당 배너 영역마다 페이지를 연동했어요.

-앱 실행시, 이미지의 특정 배너를 선택하면 연동된 페이지로 이동하게끔 제작할 수 있습니다

사용자 앱) 명덕외고앱 이미지페이지 적용화면

STEP1. 시작하기

페이지 템플릿 만들기는 앱제작에서 만들 수 있습니다.

1)STEP3페이지 단계 이동

2)페이지 디자인 [이미지맵] 선택

3)[+새로만들기]를 선택해주세요.

[+새로만들기]를 클릭하면 이미지 페이지 제작도구 화면이 열립니다.

아래에서 이미지 페이지를 제작하는 방법과, 제작 후 해당 페이지를 앱에 적용하는 방법을 알려드릴게요.


STEP2. 제작하기(제작도구)

이미지페이지를 제작할 수 있는 제작도구 화면이 열립니다.

1.이미지 등록하기

가장 먼저 이미지를 등록해주세요.

[이미지 업로드] 버튼 혹은 [새로만들기] 버튼을 선택해서, 등록하고자 하는 이미지를 선택해주세요.

*이미지 페이지는 디자인이 된 이미지 위에 링크 등의 배너를 올리는 기능이기 때문에, 디자인 작업이 완료된 이미지로 올려주셔야해요!

처음 작업을 할 경우 [새로 만들기] 버튼을 선택해서 작업해주세요

기존에 작업을 한 내용 물 외에 수정된 이미지를 다시 올려야 할 경우 [이미지 업로드] 버튼을 이용하는 것이 좋아요 !

2.이미지 페이지 제작

이미지 페이지 작업은

이미지 위에 배너 영역을 설정하는 ‘도형 툴’, 영역에 링크를 연결할 수 있는 ‘링크 액션’, 영역 스타일을 설정하는 ‘기본 스타일’만 확인해주시면 됩니다.

★기본 스타일

-Background Color : 툴로 설정한 영역에 색을 입힐 수 있구요.

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

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

3.도형툴 – 스타일 확인하기

툴 모양은 점모양 ,사각형, 타원형, 다각형으로 제공됩니다.

-점모양을 이용할 때는 이미지 위에 마우스 커서를 클릭하면 점이 생깁니다.

-사각형, 타원형 모양을 이용할 때는 이미지 위에 마우스 커서를 놓고 왼쪽에서 드래그해서 영역을 만들어주면 됩니다.

-다각형의 경우 여러 영역에 점을 찍고, 다시 처음에 점을 찍은 곳으로 점을 찍면 다각형 영역이 만들어집니다.

▶움짤 이미지를 통해서 영역을 설정하는 방법을 확인해주세요

4.링크 적용하기

영역을 설정했다면 설정한 영역 안으로 링크를 적용하는 방법을 확인해볼게요.

링크는 오른쪽의 [링크 액션]을 선택해서 적용해주세요.

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

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

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

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

3) 링크마법사: 연동할 앱 메뉴, 웹링크 등의 페이지 등을 선택할 수 있는 도구입니다.

링크마법사 버튼을 선택하면 위의 이미지처럼 ‘링크마법사’ 창이 뜹니다.

여기서 해당 배너를 선택했을때 이동할 메뉴를 선택하면 됩니다.

해당 매뉴얼에서는 이미지의 소개 배너를 선택했기 때문에, 미리 작업해놓은 ‘스윙카페소개’ 템플릿을 선택할게요.

[반영]을 선택해주시면 됩니다.

*주의사항

앱 내의 메뉴 및 컨텐츠는 작업을 다 완료해주셔야 합니다.

게시판이나 사용자 페이지 등의 작업이 다 안되어 있다면 링크 마법사에서 선택할 수 있는 메뉴가 없겠죠?

따라서 앱에 들어갈 컨텐츠 제작을 모두 완료한 뒤 이미지 페이지에서 링크 마법사를 이용해주세요.

당연히~ 링크마법사에서는 위의 메뉴 외에도 다른 메뉴들로 모두 적용이 가능합니다.

예를 들어 배너를 선택했을때 블로그로 이동하게 하고 싶다고 할 때는 [링크마법사] 선택 후 [웹링크]에서 – 블로그 사이트 주소 URL 입력 후 반영해주시면 됩니다.

마우스 오버 스타일을 이용하여 Background Color 에서 컬러를 입힐 수 있구요.

Background Opacity 에서 ‘0’으로 설정하면 배너를 투명하게 설정할 수도 있습니다.

5.제작 TIP - 스타일 복제

TIP을 한가지 드리면요

리스트에서 [스타일 복제 버튼]을 이용하면, 동일한 영역 스타일과 기본 스타일을 그대로 가져올 수 있습니다.

링크 설정만 변경을 하면 되니, 좀 더 간편하게 만들 수 있어요!

6.제작 TIP - 배경색 추가하기

이미지 페이지는 이미지를 기반으로 웹페이지로 구성되는 사용자페이지 제작도구입니다.

핸드폰 모바일 규격에 따라 가로 사이즈에 맞춰 적용이 되는데요.

동일한 사이즈의 이미지페이지를 적용해도 핸드폰에 따라 화면이 길어 하단에 흰색 여백이 생기는 경우도 있고, 이미지페이지가 더 길어서 화면에 딱 맞지 않고 조금 넘어가서 스크롤이 되는 경우도 있습니다.

​

이러한 문제를 보완하기 위해 배경색 추가기능을 적용할 수 있습니다.

이미지 배경색과 동일한 배경색을 넣어서 앱제작을 조금 더 퀄리티 있게 완성할 수 있습니다.

1)왼쪽 메뉴 '배경색 추가'

2)HEX 코드 값 입력

3)저장 버튼 선택

배경색을 추가하면 흰색 여백에 이미지 페이지로 등록한 이미지 배경색과 동일한 색상이 입혀지기 때문에 하나의 페이지로 인식됩니다.

7.제작 완료

이미지페이지 적용이 완료되었구요

마지막으로 페이지 이름 입력 해주세요. (앱에 적용시 해당 페이지이름으로 메뉴에 표시됩니다.)

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

그럼 다시 앱제작 페이지로 돌아가서 앱에 해당 이미지페이지를 적용해볼게요!!


STEP3. 앱에 적용하기(이미지페이지 앱 적용)

앱제작 화면 이동

1)STEP3 페이지 단계로 이동합니다.

2)홈화면 – HOME 선택

3)메뉴 이름은 변경하지 않아도 됩니다.

*이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.

4)페이지 디자인에서 [이미지맵]을 선택해주세요.

5)오른쪽에 있는 ‘새로고침’ 버튼을 선택하면 만들어놓은 템플릿을 확인할 수 있습니다.

6)[적용하기] 를 선택합니다. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)

7)화면 상단 [저장]버튼을 누르면 앱에 적용됩니다.

*홈화면을 선택해서 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요. 메뉴에도 페이지를 적용할 수 있습니다.

*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다.

*미리보기 버튼을 선택하면 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.

*페이지 적용 후에 가상머신을 통해서도 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.

*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 HOME에는 적용 불가하며 필수 입력 항목이 아닙니다.


STEP4. 이미지페이지 제작도구 – 툴팁 적용하기

이미지페이지에 링크 배너를 연동하는 것 외에 툴팁을 적용하는 방법도 알려드릴게요

툴팁이란?

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

1. 툴팁 적용방법

이미지페이지 제작도구에서 [새로들기] 버튼을 선택한 뒤 이미지를 불러와주세요.

1)이미지 위에 툴팁을 적용할 영역에 툴 메뉴로 해당 영역을 드래그하여 선택해주세요.

​

—오른쪽 메뉴 바에서 이용할 메듀들을 설명해드릴게요—

2) 링크액션

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

(1) 마우스 오버 수행동작: 마우스를 갖다댔을 때 어떻게 작동할지를 적용하는 메뉴입니다. [아무것도 안함]을 선택해주세요.

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

터치를 하면 툴팁이 보여져야 하기 때문에 클릭수행동작에서 [툴팁 보여주기]를 선택해주세요.

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

3)기본 스타일

툴 영역 스타일인데요. 해당 옵션은 백그라운드 컬러, 백그라운드 투명도만 확인해주세요.

툴팁이 보여질 영역이 보이게 할 경우 색상 및 투명도를 넣어주시구요.

영역을 안보이게 할 경우 Background Opacity(투명도)를 ‘0’ 으로 해주세요.

4) 툴팁 스타일

툴팁 스타일을 입력하는 메뉴이구요. -> 메시지가 보이는 박스 영역 디자인

가로&세로 사이즈 수정, 컬러, 툴팁 위치, 투명도, 영역 라운딩 정도를 설정할 수 있습니다.

*주의* 사이즈 수정시 가로 길이는 330을 넘지 않도록 해주세요.(최대 330px)

5) 텍스트 스타일

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

제목 영역과 본문 영역을 나눠서 수정할 수 있어요.

6) 툴팁 내용

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

7) 페이지 이름 입력해주세요 *페이지 이름 입력은 내용 모두 저장 후 입력해주셔도 됩니다.

8) ​완료된 뒤 [저장] 버튼을 눌러주세요.

​

9) [미리보기]를 선택하면 이미지 위에 적용된 툴팁 박스를 확인할 수 있습니다.

2. 툴팁 적용한 이미지 페이지 앱에 적용하기

툴팁으로 제작한 이미지페이지도 앱에 적용할 수 있습니다.

앱에 적용하는 방법은 위에서 알려드린 방법과 동일합니다.

앱제작 화면 이동

1)STEP3 페이지 단계로 이동합니다.

2)홈화면 – HOME 선택

3)메뉴 이름은 변경하지 않아도 됩니다.

*이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.

4)페이지 디자인에서 [이미지맵]을 선택해주세요.

5)오른쪽에 있는 ‘새로고침’ 버튼을 선택하면 만들어놓은 템플릿을 확인할 수 있습니다.

6)[적용하기] 를 선택합니다. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)

7)화면 상단 [저장]버튼을 누르면 앱에 적용됩니다.

*홈화면을 선택해서 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요. 메뉴에도 페이지를 적용할 수 있습니다.*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다.

*미리보기 버튼을 선택하면 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.

*페이지 적용 후에 가상머신을 통해서도 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.

*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 HOME에는 적용 불가하며 필수 입력 항목이 아닙니다.

​

3. 앱 실행화면) 이미지 페이지 툴팁


STEP5. 편집하기(이미지페이지 수정 방법)

수정은 동일하게 앱제작 메이커 – 이미지 페이지 [수정하기]로 들어가서 만들어놓은 페이지 위에 덮어서 수정해주시면 됩니다.

이미지 페이지에 마우스 커서를 올리면 [관리하기]버튼이 있습니다.

[관리하기] 버튼 선택 후 → [수정하기] 버튼을 선택해주세요.

이미지 페이지 제작도구 화면으로 이동합니다.

이미지 페이지 수정도 별도의 페이지가 따로 있는 것이 아니구요.

제작 페이지와 동일하게 들어가서, 기존에 만들어놓은 페이지 위에 덮어서 수정을 하는 방법으로 업데이트할 수 있어요.

이미지 페이지 적용 단계

이미지 페이지 적용 사례

움짤로 이미지페이지 제작방법 확인하기

툴팁 적용 예시)

▶
▶
▶
▶