안녕하세요, publ운영팀입니다.
publ의 에디터는 누구나 쉽게 페이지를 꾸밀 수 있게 사용성과 난이도를 적절히 조절하면서도 기능의 다양성 및 디자인 옵션을 제공하여 능숙한 분들은 더 높은 수준의 결과물을 낼 수 있게 만들어져 있어요!
오늘은 그 중에서 에디터로 페이지를 만드는 것은 쉽고 금방하겠는데... '예쁘게' 만드는 것이 어려웠던 분들을 위해 여러가지 팁들을 준비해봤어요😉
그럼 시작합니다!
👇🏻
본격적으로 페이지를 꾸미기 전에 확인해보세요!
페이지를 만들 때 섹션의 세팅을 한 번 체크해주세요. 열심히 얹어서 페이지를 만들어서 게시했는데 틀어져보이면 난감하니깐요!
섹션의 구조는 크게 배경 역할을 하는 영역과 실제 블록들이 배치되는 영역이 있어요. (설명을 위해 간단히 배경 영역과 콘텐츠 영역이라고 부를게요.)
섹션을 선택하여 우측 [정보] 탭의 <섹션> 부분을 보시면 너비에 대한 설정들이 있는데, 이것은 콘텐츠 영역에 대한 너비 설정이라고 보시면 됩니다!
- <너비>는 콘텐츠 영역(블록이 배치된 영역)을 지정하는 것이라고 생각하시면 됩니다. 브라우저가 넓어지더라도 콘텐츠 영역은 늘어나지 않아요. 1200px 이상의 값을 입력했다면 브라우저가 좁아짐에 따라 1200px 너비까지 비율에 맞게 줄어들어요. 1200px 미만의 값을 입력했다면 설정한 값으로 콘텐츠 영역이 고정됩니다.
- <전체 너비 사용>은 브라우저가 넓어짐에 따라 콘텐츠 영역도 함께 넓어지는 것을 말해요. 브라우저가 좁아짐에 따라 1200px 너비까지 비율에 맞게 줄어듭니다.
전체 너비 사용보다 너비를 직접 지정하는 것을 추천해드려요!
다양한 사이즈의 브라우저로 페이지를 보게 될 상황을 고려하여, 브라우저에 맞춰서 콘텐츠가 늘어난다면 블록의 사이즈나 블록간 간격이 본래 만들었던 것과 달라 완전히 다른 느낌을 줄 수 있기 때문이에요.
우측 상단 [미리보기] 버튼을 눌러 중간중간 확인해보면 오차를 줄일 수 있을거에요.
***
소소하지만 알찬 꿀팁 소개해드릴게요.
블록끼리 간격을 더 띄우거나 붙이고 싶을 때!
레이아웃의 여백을 활용하여 블록 간 간격에 대해 더 디테일하게 조정할 수 있어요!
- 우측 [레이아웃] 탭의 <여백>으로 이동해요.
- <여백 수치>의 값은 블록 내부의 간격이라고 보시면 되는데, 수치를 입력하면 미리보기 영역에서 선택 영역에서 내부 여백이 적용된 것을 볼 수 있어요.
- 부분만 간격을 조정하고 싶다면 <동일한 값 사용> 옵션을 끄고 값을 입력해주세요!
- 블록들을 그리드 한 칸 정도 겹쳐놓고 여백을 조정하는 식으로 디테일한 간격을 맞춰보세요!
클릭 할 수 있는 요소라는 걸 표현하고 싶을 때!
스타일의 Hover를 활용하여 느낌을 줄 수 있어요!
- 우측 [스타일] 탭의 [Hover]를 선택해주세요.
- <이미지>, <외곽선>, <그림자>, <투명도>의 값들을 입력해주세요.
- 미리보기 영역에서 요소에 마우스를 올리면 변화되는 것을 볼 수 있어요!
- 지정한 값들을 없애고 NORMAL과 동일하게 주고 싶다면 우측 [↺]를 눌러주세요.
스크롤 할 때 움직임을 주고 싶을 때!
스크롤 시 애니메이션 주고 싶으면 효과에서 설정하여 애니메이션을 표현할 수 있어요!
<애니메이션 유형>과 <실행 시간>, <시간 가속도>와 <반복 실행 횟수>를 원하는 값으로 설정하여 화면에 블록이 보여질 때 어떻게 재생되게 할 것인지 설정할 수 있어요.
미리보기 영역에서 스크롤을 해보며 블록이 나타날 때 모습을 재생해 볼 수 있어요.
*마우스 호버시 애니메이션은 제공 예정이니 조금만 기다려주세요~!
면적을 표현하고 싶을 때!
홈페이지에서 많이 보이는 카드 형태가 있죠. 면적 표현을 이미지를 직접 업로드 해서 표현하는 것도 하나의 방법이지만, 만약 모서리가 둥근 형태거나, 텍스트와 이미지를 넣다보니 면적 사이즈 조정을 해야할 때 모양이 이상하게 변형되는 문제를 경험하셨을 것 같은데요.
<버튼> 블록으로 면적을 활용할 수 있다는 것 알고 계셨나요? 모르셨다면 한 번 따라해보세요!
- 상단 [+]에서 [버튼] 블록을 선택해요.
- 우측 [정보] 탭의 <텍스트> - <내용>을 빈값으로 해주세요.
- 바로 아래 <전환 링크> - <링크 유형>을 [사용하지 않음]으로 설정해주세요.
- [스타일] 탭의 <버튼 색상>부터 <투명도>까지 원하는 값을 넣어주세요.
- 원하는 사이즈로 조정해서 면적처럼 이용해 보세요!
***
기쁜 업데이트 소식이 있어요! 🎉
1500개 이상의 글꼴 추가
글꼴이 화면의 완성도와 분위기에 크게 영향준다는 것 모두들 공감하시죠?
기존에는 에디터 글꼴이 3가지(Pretendard, 고딕, 명조)만 있었다면 이번 업데이트로 구글 폰트가 추가되어 무려 1500개 이상의 글꼴을 적용할 수 있게 되었어요!
라이센스 걱정 없이 이용할 수 있으니 여러분들의 브랜딩을 표현하고 디자인 감각을 마음껏 펼쳐볼 수 있어요.
원하는 글꼴을 검색하거나 필터링을 통해 쉽게 적용할 수 있으니 많은 관심 그리고 이용 부탁드려요!
작업 속도를 올릴 수 있는 단축키 기능 추가
이제 블록의 복제나 삭제를 상단에 있는 버튼을 누르지 않고, 단축키로 할 수 있게 되었습니다!
복제는 [command(ctrl)+D] 로 가능하고, 삭제는 [Delete]로 가능해요.
(블록 선택 후 마우스 우클릭으로도 접근할 수 있어요!.)
단축키 기능은 앞으로도 계속해서 추가될 예정이니 조금만 기다려주세요!
***
궁금증이 풀리셨길 바라며,
추가적으로 궁금하시거나 문의가 있으시다면 publCare의 [1:1 문의] 또는 [포럼]을 이용해 주세요!
읽어주셔서 감사합니다. 😃
-------
온라인 사업을 어떻게 시작해야할 지 막막하다면,
🤝 publ 공식 파트너에게 상담받기
🤝 온라인 강의 비즈니스 대상 지원 프로그램 알아보기