※지난글 링크

코딩 1도 모르는 사람의 웹사이트 제작법 1 - https://www.clien.net/service/board/lecture/13954210CLIEN

코딩 1도 모르는 사람의 웹사이트 제작법 2 - https://www.clien.net/service/board/lecture/13983656CLIEN

코딩 1도 모르는 사람의 웹사이트 제작법 3 - https://www.clien.net/service/board/lecture/14022623CLIEN

코딩 1도 모르는 사람의 웹사이트 제작법 번외 1 - https://www.clien.net/service/board/lecture/14113851CLIEN

지난번 글에선 아임웹의 상단메뉴 편집방법과 본문 제작 방법에 대한 부분을 살짝 알아보았습니다.

본문 작업의 경우 이미 제작되어있는 섹션을 불러와 원하는 부분을 수정해 사용하는 방법이

가장 간편하고 퀄리티도 좋기 때문에 가장 추천하는 방법 이었는데요,

물론 디자인 센스가 출중하신 분이나 도전정신으로 무장하신 분들은 아무것도 없는 빈 페이지에서 기능 하나하나 쌓아갈 수도 있지만.

저처럼 그 어느쪽에도 해당하지 않는 분들은.. 섹션의 퀄리티 = 본문의 퀄리티 라고 생각하시는게 좋습니다 ㅎㅎ;

그래서 오늘은 본문의 퀄리티 업을 위해 아임웹이 기본 제공 해주는 섹션 종류에는 어떤 것들이 있나 둘러볼까 합니다.

-섹션 불러오는법-

지난 글에서 둘러봤듯 왼쪽의 섹션 추가 탭에서 섹션들을 추가할 수 있습니다.

1.

잘못된 형식의 이미지 링크입니다.

이 섹션은 홈페이지의 업무 영역 및 서비스 영역 같이 전반적인 내용을 설명할 때 좋아 보입니다.

당연히 해당 아이콘들과 하단 텍스트, 배치스타일은 내 임의대로 변경할 수 있으니 위와 같은 배치를 고집할 이유는 없습니다.

(근데 굳이 크게 수정할 필요 없이 잘 정리되어있긴 하네요 ㅎㅎ)

아이콘 대신 이미지를 사용 할 수도 있으니 취향껏 사용하기 좋은 위젯입니다. 

2.

잘못된 형식의 이미지 링크입니다.

버튼이 들어간 섹션 입니다.

해당 버튼을 클릭했을때 어느 페이지로 이동시킬것인지 따로 설정할 수 있기 때문에 구매창으로 연결 시킬 수도 있습니다.

상대적으로 적은 갯수의 아이템을 다루는 개인 사업자들에게 특히 좋은 섹션이라 생각합니다.

전체적인 사이트의 퀄리티를 높이면서 빈약해 보일 수 있는 구매페이지를 가득 채워주는 효과를 기대할 수 있기 때문입니다 ㅎㅎ. 

3.

개인적으로 치트키라고 생각하는 섹션입니다.

스크롤을 위아래로 이동 시키면 보통 이미지와 텍스트가 통째로 이동하지만

이 섹션은 배경으로 설정한 이미지는 고정되어 있고 텍스트 등 컨텐츠들만 스크롤 됩니다.

전문용어로는 페럴렉스 스크롤이라고 하는데 웹의 몰입감을 높이는데 유효하다고 하니 참고해주세요.

( 말로 설명드리는것보다 움짤을 확인하시는게 단박에 이해가 되실듯 ㅎㅎ; )

이 섹션만 적절히 섞어주면 굉장히 이국적이고 트렌디한 느낌의 사이트가 완성되기 때문에 제가 가장 좋아하는 섹션중 하나입니다. 

4.

내가 설정한 갤러리가 애니메이션화 되어 수평으로 스크롤 되는 섹션입니다.

기본 설정은 3장의 그림이 시간흐름에 따라 넘어가게끔 되어있지만

우클릭으로 설정창을 열어 표기되는 이미지의 갯수 혹은 넘어가는 타이밍, 자동/수동 등을 설정할 수 있습니다.

위에서 살펴본 4가지 섹션은 무조건 그대로 사용해야 하는것도 아니며

수정을 거쳐 완전히 새로운 섹션을 만들어내는것도 가능하기 때문에 더 다양한 형태의 섹션을 생성할 수 있습니다.

과거에는 이런 기능들을 구현하기 위해선 모두 하나하나 코드로 작업해야 했다고 하는데,

웹빌더 덕분에 저같은 비 전공자도 마우스 클릭 몇번으로 쉽게 작업할 수 있게되었네요 ㅎㅎ

다음번엔 해당 섹션들을 활용해 어떤 사이트들을 만들어낼 수 있는지 알아보도록 하겠습니다.

이번에도 긴 글 읽어주셔서 감사합니다!