Chapter 3. 아임웹으로 페이지 구축하기
1. 아임웹 기초 이용 방법
반응형으로 제작됨
웹사이트 제작, 운영, 마케팅, 통계 분석에 필요한 다양한 외부 서비스들도 쉽게 연결 사용 가능
ex. 페이스북 FBE 페이스북 비즈니스 확장도구를 사용하여 보다 간단히 연결 가능
네이버, 카카오 쇼핑에 상품을 연결하여 호출 가능
네이버 페이, 카카오페이 같은 간편 결제 서비스도, SNS소셜 로그인 그리고 본인인증과 같은 서비스도 코드 없이 연결 사용 가능
주요 3가지 - 내사이트, 디자인 모드, 관리자 페이지
내사이트
- 사이트 단위로 관리할 수 있는 페이지
- 내 사이트에서 웹사이트를 개설 관리자 페이지로 이동 또는 디자인 모드로 이동하여 디자인 작업도 가능
- 개설한 사이트 복제, 삭제 가능
템플릿 중 골라서 미리 보기로 템플릿 내용 확인
사이트 개설 시 - 사이트 이름 (변경가능)
URL - 영문+ 숫자 ( 한 달에 한번 무료로 변경이 가능)
사이트 개설 후 내 사이트에서 확인
삭제한 사이트는 복구가 불가능하다
기본설정을 먼저 해두는 것이 좋다
- 사이트 이름, 설명, 패비콘, 대표이미지 4가지
사이트 이름 (변경가능), 사이트에 대한 설명이 필요함. 네이버나 구글 포털 사이트에 검색노출할 때 검색수집에 도움이 된다. 패이콘과 대표이미지는 내 사이트의 브랜드 아이덴티티를 보여줌.
상점/사이트 정보 설정 - 쇼핑몰 운영시 필수지만 아니라면 선택적으로 입력하면 된다.
기본설정 모드 end -
페이지 구성
디자인 모드 들어가기
1. 마이 페이지에서 - 관리 - 디자인 모드
2. 관리자 페이지 - LNB 디자인 모드
3개 영역으로 나눠짐(점선으로 나눠져 있음)
상단 섹션 (숨김설정이 없으면 모든 페이지에 동일하게 나타남)
본문 섹션
하단 섹션 (숨김설정이 없으면 모든페이지에 동일하게 나타남)
메뉴 = 페이지 (같은 의미)
최 상단 Overview에 hover - 페이지 설정
페이지 > 섹션 > 위젯 (여백 텍스트 같은 콘텐츠를 등록)
여백과 콘텐츠가 들어가는 영역 - 위젯
메뉴 생성 (좌측상단 '三')
글로벌 메뉴 - 직접 생성하는 메뉴가 아님, 사이트 기능에 따라 자동생성.
ex. 쇼핑 템플릿이라면 쇼핑기능에 맞는 장바구니, 상품 상세 페이지와 같은 글로벌 메뉴가 추가된다.
모달 - 이미지나 버튼 클릭 시 팝업 형태로 내용을 노출할 때 사용되는 메뉴
'+'를 클릭하여 메뉴 이름을 적어서 생성, Overview 맨 아래로 메뉴가 생성됨.
우클릭으로 메뉴추가 시 우클릭한 메뉴 아래로 메뉴가 생성됨.
메뉴 순서 변경을 드레그로 가능, 드레그로 하위메뉴로 넣어서 그룹핑 가능
메뉴설정 ('i' 클릭 또는 우클릭)
메뉴 숨김 -사이트에서는 보이지 않지만 사라진 것이 아니기 때문에 사용가자 URL을 알고 있다면 들어와서 볼 수 있다.
상단, 하단 숨김
페이지 구성 end -
디자인 그리드 & 본문
디자인 - 좌측 상단 + 클릭
위젯을 드래그 하여 이동하여 위치 변경
바를 이용하여 그리드 변경
모바일 버전에서는 하나씩 아래줄로 내리게 된다.
검은 바로 드래그 하여 배치하여 그룹핑
모바일 화면으로 확인하여 배치 확인
좌측상단 섹션 추가 우클릭으로 섹션 이동 가능
우측상단 톱니바퀴 - 공통디자인 설정
섹션 우클릭을 통해 섹션 설정
섹션 설정 - 배경색, 텍스트 색상, 섹션 여백과 그리드 간격 조정
가로 100% 확장 - 가로 1920으로 변경 (기본 : 1280)
디자인 본문 end -
디자인 하단
우클릭 하단 설정
SNS, 페이스북, 인스타그램에 링크연결
하단 - 별도에 디자인이 있지 않음. 좌측 상단의 섹션추가를 통해 푸터 선택 후 디자인 을 선택하고 변경
디자인 하단 end -
디자인 상단
상단 위치에서 우클릭 후 디자인 설정
차이점
- 좌측 상단 위젯 추가 기능을 사용할 수가 없다.
- 12 그리드 형태를 지원하지 않는다.
세로 바의 이동으로 3군데의 영역의 사이즈가 변경.
노사 측에 있는 사이트 이름이 좁아지면 두줄로 변경됨
메뉴가 많아지면 가운데 영역의 메뉴 텍스트가...으로 표시될 수도 있음 이럴 땐
빈 섹션 추가 후 메뉴를 잡고 드래그 메뉴를 밑으로 내리면 됨.
상단영역 : 상단기본, 겹치기, 고정 메뉴 - 3가지 디자인이 가능
기본 상단과 겹치기 상단
겹치기 설정 - 우클릭 겹치기 설정, 우측 상단에 종이 두 장 겹쳐있는 아이콘
상단 바로 아래 있는 첫 번째 섹션의 배경색 또는 배경 이미지가 겹쳐져서 하나의 섹션처럼 보이는 기능
첫번째 섹션에 배경색과 배경이미지가 존재해야지만 가능하다.
페이지마다 겹치는 사용여부를 다르게 할 수 있다.
따라오는 상단은 고정 상단 - 핀으로 고정
스크롤했을 때 고정으로 상단이 따라옴
우측 상단 '고정메뉴설정' 을통해 고정 상단 디자인 후 on으로 활성화
우측 상단에 상단 테마 선택
디자인 상당 end -
디자인 위젯
좌측상단 '+' 위젯추가
'디자인 요소'와 'DB 요소'로 나눠짐 - 관리자 페이지와 연동된다는 점에서 차이를 보임
이미지 위젯 추가 후 우클릭 -'이미지설정'
이미지의 비율에 따라서 사이즈가 달라짐 - 높이 설정
이미지 우클릭 - '이미지 채우기' 설정 또는 이미지설정 - '이미지 채우기 효과' 설정으로
이미지 채우기로 좌우의 공백을 없애주기 - 원본에서 크롭 됨 (중앙을 기준으로 좌우 여백 없이 위젯영역에 차도록 함
텍스트 위젯
이미지 위에 텍스트 - 배경색상 위에 텍스트 - 텍스트 라운딩
텍스트 테두리 라인
검은 배경의 음양 차이
텍스트 좌우 여백
'비주얼섹션' 위젯
이미지가 슬라이드 되는 형태
배경으로 자리를 잡기 때문에 섹션 안에 설정이 되는 것이 아닌 별도의 섹션으로 생성이 되고
본문 폭의 크기가 아닌 섹션 전체를 사용하게 되는 것이다.
슬라이드 추가 제거 가능
링크 중복으로 하면 안 됨. (텍스트 링크 x) - 슬라이드에 링크 걸어주기
배경에 동영상 넣기 가능 - 하나의 슬라이드만 가능
유튜브나 비메오 영상을 공유해서 사용함 (동영상 크기의 용량이 큼으로 재생할 때 버퍼 걸림)
아이폰에서는 자동 재생이 안됨, 갤럭시는 자동재생 가능
디자인 설정
슬라이드에 들어가는 텍스트 색상과 슬라이드가 전환되는 효과, 전환이 되는 시간을 설정
버튼 배경색 텍스트 색상 지정 가능
음영색상 부분 - 비주얼섹션 사용하게 되면 음영이 자동으로 적용되어 있다. - 내 이미지를 올렸을 때 원본보다 어둡다고 느낄 수 있다.
우측 끝으로 밀어서 음영을 제거해야 원본 그대로의 이미지를 확인할 수 있다.
동영상 위젯
IOS 기계에서는 동영상이 자동 재생 되지 않는다. - 수동재생
라이트박스 - 클릭했을 때 전체화면으로 영상을 볼 수 있다.
보안 때문에 음소거 설정을 하지 않는다면 영상이 재생되지 않는다.
또는 브라우저 자체에서 소리 차단 상태로 재생시킬 수 있다.
자동재생을 설정할 경우는 음소거를 꼭 체크해야 한다.
제목 감추기 - 비메오에서는 사용가능
플레이어 컨트롤 감추기 - 유튜브에서만 사용이 가능
여백위젯을 활용하여 동영상 사이즈의 변경
다양한 레이아웃 형태를 구현
메뉴 리스트 위젯
LNB생성 - 메뉴 리스트 설정으로 하위 메뉴 모두 펼치기 기능 설정 가능
갤러리 위젯
- DB 위젯
관리자 페이지에 이미지 데이터가 저장이 됨
실수로 위젯을 삭제하더라도 해당 갤러리에 들어가 있는 이미지 데이터는 남아있어서 다시 불러와 사용가능
디자인 수정가능
그리드 갤러리, Masonry 갤러리, 슬라이드 갤러리로 나눠짐
그리드 갤러리 - 이미지의 비율이 동일할 때 사용하기 적합
Masonry 갤러리 - 이미지의 비율이 다르더라도 위젯 자체에서 이미지를 배치
슬라이드 갤러리 - 이미지가 슬라이드 되어 움직임
이미지의 비율 설정 변경
더 보기를 이용하여 설정한 개수만큼 이미지를 추가적으로 볼 수 있음
인스타 연동을 하여 - 피드를 불러와서 노출 가능
1시간마다 피드가 갱신됨
최근 올라온 피드를 기준으로 최대 25개까지 불러와서 활용이 가능.
입력폼 위젯
- 사용자 정보를 얻기 위함
입력폼 항목 삭제 시
나중에 이름 항목을 제거한다면
기존에 받아놓았던 이름이 있는 데이터가 함께 사라짐. - 복구가 불가능
항목이 변경되었다면 위젯을 새로 추가하여 새로운 입력폼으로 변경을 해주어야 한다.
게시판 위젯
FAQ 게시판
리스트 게시판 - 아코디언 형식 게시판
관리자가 질문을 등록해 놓고 사용자는 확인을 하는 목적으로 사용되고 있어서 아코디언은 댓글기능이 지원되지 않기 때문에 FAQ 게시판에 적합하다.
게시판 내용이 많을 때 메뉴로 나눠서 넣는다.
공지사항, 문의 게시판, FAQ게시판, 자유게시판 등 여러 한 형태로 다양하게 구현할 때 다양한 게시판
최신글 위젯
- 여러 게시판 위젯을 통해 작성된 게시글들을 불러와서 내용을 보여주는 목적으로 사용
메인페이지에 공지사항이나 자주 묻는 질문 노출에 사용됨 ( 한 페이지에 두 개이상의 게시글을 노출)
디자인 위젯 end -
모바일 디자인 모드
PC에서는 보이지 않음, 모바일에서만 보임
게시판, 캘린더, 지도, 쇼핑, 예약은 모바일 전용 불가능
텍스트 삽입하여 섹션 나눠주고 싶을 때 PC 버전으로 먼저 가서 수정 (섹션 나누기)
모바일에 돌아와서 위치 이동해 주면 됨
모바일 화면에서 수정을 위해서 PC 섹션디자인할때 섹션마다 나눠서 디자인해주면 나중에 수정이 편하다.
모바일 화면 따로 디자인 할 경우
PC 디자인 화면이 보이지 않도록 구현 - 숨김
위젯에 마우스 올려서 '눈표시' 선택
2. 아임웹 쇼핑 설정 방법
쇼핑 토글 활성화
쇼핑 환경설정 과 배송관리 - 두가지를 먼저 작업해야함 > 상품을 등록할때 공통적으로 적용되는 내용이기 때문에
배송방법 - 택배, 소포, 등기, 직접배송
3. 포트폴리오 등록 및 랜딩페이지 만들기
랜딩페이지 만들기 -원페이지 구성 (각각의 페이지가 한페이
우측상단 >공통디자인 설정 > 원페이지 구성
클릭했을때 한페이지 내에서 이동되어 보여짐
입력폼으로 방문자의 정보를 받은 방법도 구현이 가능하다
'조금의 적극성 > 라이프해킹스쿨_강의' 카테고리의 다른 글
| [4주차] 팀 발표 #20 (0) | 2023.06.05 |
|---|---|
| [4주차] 매출 2배 올리는 랜딩 웹페이지 제작하기 #19 (0) | 2023.06.01 |
| [4주차] 매출 2배 올리는 랜딩 웹페이지 제작하기 #17 (0) | 2023.05.30 |
| [4주차] 매출 2배 올리는 랜딩 웹페이지 제작하기 #16 (2) | 2023.05.29 |
| [3주차] 포리얼 강사님의 특강 #15_라이브세미나 (0) | 2023.05.26 |
