[5/31] 18기 클래스 리뷰 #18

Chapter 4-11. 아임웹 기초 이용 방법

>> 반응형 사이트로 제작됨 

 

웹사이트 제작, 운영, 마케팅, 통계 분석에 필요한 다양한 외부 서비스들도 쉽게 연결 사용 가능

ex. 페이스북 FBE 페이스북 비즈니스 확장도구를 사용하여 보다 간단히 연결 가능

네이버, 카카오 쇼핑에 상품을 연결하여 호출 가능

네이버 페이, 카카오페이 같은 간편 결제 서비스도, SNS소셜 로그인 그리고 본인인증과 같은 서비스도 코드 없이 연결 사용 가능

 

 

- 사이트 단위로 관리할 수 있는 페이지

- 내 사이트에서  웹사이트를 개설 관리자 페이지로 이동 또는 디자인 모드로 이동하여 디자인 작업도 가능

- 개설한 사이트 복제, 삭제 가능

 

템플릿 중 골라서 미리 보기로 템플릿 내용 확인

사이트 개설 시  - 사이트 이름 (변경가능)

URL - 영문+ 숫자 ( 한 달에 한번 무료로 변경이 가능)

사이트 개설 후 내 사이트에서 확인

삭제한 사이트는 복구가 불가능함

 

 

 

 

URL 월1회 변경 가능

사이트 >> 내 사이트에 만든 사이트가 보임

 

기본설정을 먼저 해두는 것이 좋다

- 사이트 이름, 설명, 패비콘, 대표이미지 4가지

사이트 이름 (변경가능), 사이트에 대한 설명이 필요함. 네이버나 구글 포털 사이트에 검색노출할 때 검색수집에 도움이 된다. 패이콘과 대표이미지는 내 사이트의 브랜드 아이덴티티를 보여줌.

 

 

관리

>> 사이트 관리 / 디자인 모드 / 템플릿 변경 . 사이트 복제 / 소유권 이전 / 사이트 삭제

 

사이트 관리 페이지

 

 

네가지 

사이트 이름 / 설명 / 사이트 명 / 대표 이미지 / 패비콘 >> 대표 이미지가 되는 부분을 제작해서 만들어둘 

 

상점/사이트 정보 설정 - 쇼핑몰 운영시 필수지만 아니라면 선택적으로 입력하면 된다.

 

 

상단 / 본문 / 하단 >> 섹션

 

디자인은 가장 큰 단위 페이지부터 시작

메뉴, 페이지 같은 이름

메뉴 안 >> 섹션의 요소가 들어가고 여백, 컨텐츠(텍스트) 삽입 - 위젯

 

페이지 >> 섹션 >> 위젯 등록

 

메뉴 / 페이지 제작 / 페이지 구성

 

디자인 모드 들어가기

1. 마이 페이지에서 - 관리 - 디자인 모드

2. 관리자 페이지 - LNB 디자인 모드

 

상단 메뉴

 

 

3개 영역으로 나눠짐(점선으로 나눠져 있음)

상단 섹션 (숨김설정이 없으면 모든 페이지에 동일하게 나타남)

본문 섹션

하단 섹션 (숨김설정이 없으면 모든페이지에 동일하게 나타남)

 

메뉴 = 페이지 (같은 의미)

최 상단 Overview에 hover - 페이지 설정

 

페이지 > 섹션 >  위젯 (여백 텍스트 같은 콘텐츠를 등록)

여백과 콘텐츠가 들어가는 영역 - 위젯

 

+버튼 클릭 >> 위젯 생성

 

글로벌 메뉴 - 직접 생성하는 메뉴가 아님, 사이트 기능에 따라 자동생성.

ex. 쇼핑 템플릿이라면 쇼핑기능에 맞는 장바구니, 상품 상세 페이지와 같은 글로벌 메뉴가 추가된다.

 

모달 - 이미지나 버튼 클릭 시 팝업 형태로 내용을 노출할 때 사용되는 메뉴

 

'+'를 클릭하여 메뉴 이름을 적어서 생성, Overview 맨 아래로 메뉴가 생성됨.

우클릭으로 메뉴추가 시 우클릭한 메뉴 아래로 메뉴가 생성됨.

메뉴 순서 변경을 드레그로 가능, 드레그로 하위메뉴로 넣어서 그룹핑 가능 

메뉴설정 ('i' 클릭 또는 우클릭)

메뉴 숨김 -사이트에서는 보이지 않지만 사라진 것이 아니기 때문에 사용가자 URL을 알고 있다면 들어와서 볼 수 있다.

상단, 하단 숨김

 

위젯을 드래그 하여 이동하여 위치 변경가능함

 

디자인 레이아웃 설정해야 함!

모바일에서 보여지는 이미지

실제로 레이아웃이 적용이 안되어 있음

 

 

 

 

좌측상단 섹션 추가 우클릭으로 섹션 이동 가능 / 우측상단 톱니바퀴 - 공통디자인 설정 / 섹션 우클릭을 통해 섹션 설정 /

 

섹션 설정 - 배경색, 텍스트 색상, 섹션 여백과 그리드 간격 조정

가로 100% 확장 - 가로 1920으로 변경 (기본 : 1280)

 

 

디자인 하단

 

우클릭 하단 설정

SNS, 페이스북, 인스타그램에 링크연결

하단 - 별도에 디자인이 있지 않음. 좌측 상단의 섹션추가를 통해 푸터 선택 후 디자인 을 선택하고 변경

 

디자인 상단

 

상단 위치에서 우클릭 후 디자인 설정

차이점

- 좌측 상단 위젯 추가 기능을 사용할 수가 없다.

- 12 그리드 형태를 지원하지 않는다.

세로 바의 이동으로  3군데의 영역의 사이즈가 변경.

노사 측에 있는 사이트 이름이 좁아지면 두줄로 변경됨 

메뉴가 많아지면 가운데 영역의 메뉴 텍스트가...으로 표시될 수도 있음 이럴 땐

 

빈 섹션 추가 후 메뉴를 잡고 드래그 메뉴를 밑으로 내리면 됨.

상단영역 : 상단기본, 겹치기, 고정 메뉴 - 3가지 디자인이 가능

기본 상단과 겹치기 상단

겹치기 설정 - 우클릭 겹치기 설정, 우측 상단에 종이 두 장 겹쳐있는 아이콘

상단 바로 아래 있는 첫 번째 섹션의 배경색 또는 배경 이미지가 겹쳐져서 하나의 섹션처럼 보이는 기능

첫번째 섹션에 배경색과 배경이미지가 존재해야지만 가능하다.

페이지마다 겹치는 사용여부를 다르게 할 수 있다.

따라오는 상단은 고정 상단 - 핀으로 고정 

스크롤했을 때 고정으로 상단이 따라옴 

우측 상단 '고정메뉴설정' 을통해 고정 상단 디자인 후 on으로 활성화

상단기본에 있는 고정 핀이 해제가 된다는것을 의미함

우측 상단에 상단 테마 선택

 

'디자인 요소'와 'DB 요소'로 나눠짐 - 관리자 페이지와 연동된다는 점에서 차이를 보임

이미지 위젯 추가 후 우클릭 -'이미지설정'

이미지의 비율에 따라서 사이즈가 달라짐 - 높이 설정

 

이미지 우클릭 - '이미지 채우기' 설정 또는 이미지설정 - '이미지 채우기 효과'  설정으로

이미지 채우기로 좌우의 공백을 없애주기 - 원본에서 크롭 됨 (중앙을 기준으로 좌우 여백 없이 위젯영역에 차도록 함

 

라이트 박스 - 이미지 클릭시 전체화면으로 이미지의 원본사이즈 가 보임

원형이미지 - 이미지의 가운데를 중점으로 원형이외 부분은 잘려나감

 

이미지 위에 텍스트 - 배경색상 위에 텍스트 - 텍스트 라운딩

텍스트 테두리 라인

검은 배경의 음양 차이

텍스트 좌우 여백 

 

'비주얼섹션' 위젯

 

이미지가 슬라이드 되는 형태

배경으로 자리를 잡기 때문에 섹션 안에 설정이 되는 것이 아닌 별도의 섹션으로 생성이 되고

본문 폭의 크기가 아닌 섹션 전체를 사용하게 되는 것이다.

 

슬라이드 추가 제거 가능

링크 중복으로 하면 안 됨. (텍스트 링크 x) - 슬라이드에 링크 걸어주기

배경에 동영상 넣기 가능 - 하나의 슬라이드만 가능

유튜브나 비메오 영상을 공유해서 사용함 (동영상 크기의 용량이 큼으로 재생할 때 버퍼 걸림)

아이폰에서는 자동 재생이 안됨, 갤럭시는 자동재생 가능

 

디자인 설정

슬라이드에 들어가는 텍스트 색상과 슬라이드가 전환되는 효과, 전환이 되는 시간을 설정

버튼 배경색 텍스트 색상 지정 가능

음영색상 부분 - 비주얼섹션 사용하게 되면 음영이 자동으로 적용되어 있다. - 내 이미지를 올렸을 때 원본보다 어둡다고 느낄 수 있다.

 

우측 끝으로 밀어서 음영을 제거해야 원본 그대로의 이미지를 확인할 수 있다. 

 

동영상 위젯

IOS 기계에서는 동영상이 자동 재생 되지 않는다. - 수동재생

 

라이트박스 - 클릭했을 때 전체화면으로 영상을 볼 수 있다.

보안 때문에 음소거 설정을 하지 않는다면 영상이 재생되지 않는다.

또는 브라우저 자체에서 소리 차단 상태로 재생시킬 수 있다.

자동재생을 설정할 경우는 음소거를 꼭 체크해야 한다.

 

제목 감추기 - 비메오에서는 사용가능

플레이어 컨트롤 감추기 - 유튜브에서만 사용이 가능

 

여백위젯을 활용하여 동영상 사이즈의 변경

다양한 레이아웃 형태를 구현

 

메뉴 리스트 위젯

 

LNB생성 - 메뉴 리스트 설정으로 하위 메뉴 모두 펼치기 기능 설정 가능 

 

관리자 페이지에 이미지 데이터가 저장이 됨

실수로 위젯을 삭제하더라도 해당 갤러리에 들어가 있는 이미지 데이터는 남아있어서 다시 불러와 사용가능

 

디자인 수정가능

 

그리드 갤러리, Masonry 갤러리, 슬라이드 갤러리로 나눠짐

 

그리드 갤러리 - 이미지의 비율이 동일할 때 사용하기 적합

Masonry 갤러리 - 이미지의 비율이 다르더라도 위젯 자체에서 이미지를 배치

슬라이드 갤러리 - 이미지가 슬라이드 되어 움직임 

 

더 보기를 이용하여 설정한 개수만큼 이미지를 추가적으로 볼 수 있음

인스타 연동을 하여 - 피드를 불러와서 노출 가능

 

1시간마다 피드가 갱신됨

최근 올라온 피드를 기준으로 최대 25개까지 불러와서 활용이 가능.

 

입력폼 위젯

- 사용자 정보를 얻기 위함

 

나중에 이름 항목을 제거한다면 

기존에 받아놓았던 이름이 있는 데이터가 함께 사라짐. - 복구가 불가능

항목이 변경되었다면 위젯을 새로 추가하여  새로운 입력폼으로 변경을 해주어야 한다.

 

게시판 위젯

FAQ 게시판

리스트 게시판 - 아코디언 형식 게시판

관리자가 질문을 등록해 놓고 사용자는 확인을 하는 목적으로 사용되고 있어서 아코디언은 댓글기능이 지원되지 않기 때문에 FAQ 게시판에 적합하다.

 

게시판 내용이 많을 때 메뉴로 나눠서 넣는다.

 

공지사항, 문의 게시판, FAQ게시판, 자유게시판 등 여러 한 형태로 다양하게 구현할 때 다양한 게시판 

최신글 위젯

- 여러 게시판 위젯을 통해 작성된 게시글들을 불러와서 내용을 보여주는 목적으로 사용

 

메인페이지에 공지사항이나 자주 묻는 질문 노출에 사용됨 ( 한 페이지에 두 개이상의 게시글을 노출)

 

 

Chapter 4-12. 아임웹 쇼핑 설정 방법

 

 

쇼핑기능 활성화 해야함!

 

상풍 관리 페이지 >> +버튼 >> 쇼핑 토글

자동화 되어있음

 

탭 클릭+ 환경설정 >> 배송관리, 쇼핑 환경설정 (상품 등록 이전에 해줄 것)

 

배송관리 >> 템플릿 적용해서 진행

>> 기본: 공통 정보로 세팅됨

 

수정법 >> 수정버튼 - 배송 템플릿 수정

 

배송법 >> 택배, 방문, 퀵서비스

- 배송비 결제 방법 : 선결제, 착불로 진행

- 택배사 (배송 추적이 가능한 업체 有)

 

간편 설정

도서산간 지역 설정 경우

 

배송 이내에 반품을 설정 (판분 배송)

배송비 대신 납부 (서비스 차원)

배송비 정보 관련 +@

끝으로 저장버튼 눌러서 확인 하고 종료할 것

 

적립금 >> 명칭, 금액설정, 포인트.. +@ 

아임웹 가입시 추천인 적립금 >> 할인 전 금액, 할인 후 금액 

 

지급 시점, 기준, 비율 - 자신에게 맞게 설정

쇼핑 위젯 추가로 등록한 상품 확인 가능

- 카테고리 등록 전 모두 보이고 카테고리 진열을 통해 다양하게 진열 할 수 있게된다.

​

상품 진열 방법

1. 카테고리 지정을 통해 - 하위메뉴

2. 쇼핑 기획전 위젯

​

쇼핑몰 하단 법적 필수 정보 가이드

하단에 반드시 들어가야하는 정보들 작성해야한다.

표시 목록!

​

취소 처리 과정

구매자가 취소요청을 하게되면 관리자 페이지에 나오게 되고 취소 승인 처리 해주면 된다.

취소 처리중 일때 환불이 이루어졌다면 강제 취소 처리!

​

 

반품 처리 과정

- 구매자 반품 방법 선택 등의 옵션 선택 후 신청

- 관리자 페이지에서 반품관리 탭

- 수거 요청하고 수거 지시.

- 수거 완료되면 반품 수거완료 처리.

​

메일 발송 설정, 알림톡 설정

- 관리자페이지에서 설정.

- 각 상황에 대한 설정

​

 

 

 

 

 

13. 포트폴리오 등록 및 랜딩페이지 만들기

 

 

랜딩페이지란?

방문자가 가장 먼저 보게되는 특정 페이지.

상세페이지가 될 수 있고 문의하기 페이지 등이 될 수 있다.

 

​디자인 모드, 빈 섹션 추가, 이미지 추가

위젯 추가, 배치 하는 등으로 디자인 해나간다.

 

​

메뉴 관리를 통해 페이지 설정하고 페이지 구성 먼저하기

​

원페이지 구성 기능 이용해서 각 페이지가 하나의 페이지처럼 보이게 하는 기능을 이용한다.

​

제외설정을 통해 별도 페이지로도 이동 가능하게 할 수 있다.