티스토리 뷰

네이버 모두 홈페이지는 모바일 환경을 기본으로 하고 있습니다. 요즘은 모바일 사용시간이 PC 사용을 능가하기 때문에 어쩔 수 없는 흐름인 것 같습니다. 대기업에서도 모바일 환경을 더욱 우선하여 제작하고 있기도 합니다. 그렇다고 PC를 배제하기는 어려운 거 같습니다. 업무에서는 사용 빈도도 높고 더 많은 정보를 보기에 적합하기 때문입니다. 

 

다행히 모두 홈페이지는 모바일 화면 제작을 하면 자동으로 PC화면도 동기화하여 보여주고 있습니다. 

앞서 제작했던 모두 홈페이지 화면은 아래와 같습니다. 메인비쥬얼을 보면 비주얼 위에 로고나, 회사명, 버튼 등 많은 것을 보여주기 위해 어둡게 처리되어 있음을 알 수 있습니다. 이 상태에서 PC로 전환했을 때 어떻게 보일까요? 

PC로 접속했을 때 보여주는 화면은 아래와 같습니다. 메인비쥬얼이 어둡게 처리되어 있지 않아서 로고나 브랜드명이 제대로 보이지 않고 있습니다. 너무 엉성해 보입니다. PC에서도 디자인적으로 깔끔하게 잘 보였으면 좋을 거 같네요. 

제작 화면 상단에서 '고급 편집:PC 홈' 탭을 선택합니다. 제목이 고급이라 왠지 어려울 듯한 느낌인데 기본 편집과 별반 다르지 않게 쉽게 제작할 수 있습니다.

앞선 화면에서 보듯이 기본적으로 PC 메인 이미지는 모바일에서 등록했던 첫번째 이미지가 보이는데요. PC에서는 별도의 다른 이미지로 등록할 수 있습니다. '이미지 올리기'버튼을 클릭한 후 원하는 이미지(가로 1920픽셀이상)를 최대 4장 추가할 수 있습니다. 이미지를 등록한 후 꽉 찬 배경을 선택해서 등록한 이미지가 브라우저 화면에 꽉 차도록 해 줍니다. 등록한 이미지의 전환 속도는 모바일과 마찬가지로 2초로 설정해 줍니다. 

초기 PC화면에서 보듯이 로고와 회사명이 이미지 위에 있어서 잘 안보이므로 이미지 바깥쪽 아래 영역으로 재배치해 주기 위해 노출 위치를 배경 아래로 변경해 줍니다.(위 화면 참고)

지금까지 제작한 화면은 아래와 같습니다. 훨씬 깔끔해지고 정돈되어 보이네요. 

PC화면에서 아래쪽을 스크롤해 보면 아래 그림처럼 문의/신청 영역이 보입니다. 영역은 큰데 배경 이미지가 비어 있어서 뭔가 미완성의 느낌이 있습니다. 눈뜨고 못 볼 지경(?)입니다.

'고급 편집'탭에서 아래쪽으로 스크롤해 보면 '문의/신청'항목이 보입니다. 아래 화면처럼 이미지 버튼형 오른쪽의 '이미지 올리기'를 클릭한 후 배경으로 쓸 이미지를 등록해 줍니다. 

등록한 이미지는 배경으로 어둡게 처리되어 아래 그림처럼 자연스럽게 노출되었습니다.

이제 마지막 단계가 남았는데요. 서브페이지들을 둘러보시면 상단에 비쥬얼이 없이 바로 본문이 나와 약간 심심해 보일 수도 있습니다. 서브페이지의 콘텐츠가 많으면 굳이 상단에 콘셉트 비주얼이 필요 없겠지만 콘텐츠가 부족하거나 좀 더 시각적으로 강조를 해주고 싶은 경우에는 배경 이미지를 등록해 주면 됩니다. 

'고급 편집'탭에서 맨 아래로 스크롤하면 페이지 배경 이미지 항목을 볼 수 있습니다. 이 항목의 오른쪽에 있는 사용을 체크해 주십시오. 아래쪽에는 모든 서브페이지 리스트가 빈 박스로 나타납니다. 배경 이미지 등록을 원하는 페이지를 클릭한 후 원하는 이미지를 등록해 주면 됩니다. 

아래 서브페이지는 배경이미지를 적용했을 때 화면입니다. 

지금까지 PC화면을 별도로 편집해 보았습니다. 아쉽게도 서브페이지마다 별도로 PC편집을 할 수 있는 방법은 없습니다. 하지만 이 정도만 해도 충분해 보이며 너무 많은 기능들은 넣기보다는 기본에 충실한 홈페이지라고 생각됩니다. 쇼핑몰, 블로그, SNS 모든 것을 연동해주는 공짜 홈페이지. 이것이면 충분하지 않을까요? 

 

다음에 새로운 강좌로 다시 뵙겠습니다.

감사합니다. 

댓글