2024-03-08 네이버 홈페이지형 블로그 구축

서론

친한 동기가 창업을 했다.

심리학에서는 남이 잘 되는 것을 공감해주는 것이 남의 슬픔을 공감해주는 것보다 더 어렵다고 이야기 한다.

하지만 이 동기가 시장에서 성공하고 본인의 뜻을 이루면서 경제적 자유를 이루는 모습을 상상하면 대리만족도 되고,

나와 상황이 같진 않지만 그래도 비슷했던 동기가 어두컴컴한 시장으로 맨 몸으로 뛰어든 것을 보면

자신의 자유의지를 실현해나가는 모습에 존경심까지 든다.

 

이 동기는 장교로 군 전역을 하고, 전공인 회계를 살려 제조업체의 회계팀에 어렵게 입사하여 일을 하다

본인의 전공과 전혀 상관이 없고, 주변에서 접점도 전혀 없었던 방충망 교체 사업으로 1인 창업을 하였다.

누구나 마음 속으로만 품고 있는 것을 이 동기는 직접 몸으로 실천한 것이다. 그만한 내적 동기나 자본이 충분해서 그렇게 한 것이 아니다.

 

이 동기가 성공한다면 분명 자기계발 영역에서도 우리가 훗날 나이가 들었을 때, 후배 청년들에게 큰 울림을 줄 수 있을 것 같다.

그래서 나 또한 내 역량이 닿는 한 이 동기를 최대한 도와주고자 하고 있다.

 

처음에는 로고를 제작해주었고, 유튜브 채널아트 제작, 전단지 제작, 그리고 이번에는 네이버 홈페이지형 블로그 구축을 도와주게 되었다.

이번 과정에서 배운 것

고객에게 어필하기 위한 카피라이트와 디자인은 어떤 것인가?

☞ 브랜드의 이미지 메이킹이 필요한 클라이언트인가, 판촉이 필요한 클라이언트인가?

 

브랜딩이 필요한 클라이언트라면 클라이언트의 핵심을 관통하는 카피와 심플한 디자인으로 브랜드의 이미지를 소비자에게 각인시키는 디자인이 필요하고,

판촉이 필요한 클라이언트라면 해당 클라이언트가 어떤 사업을 하고 있고 고객의 구매를 돕는 디자인을 해야 한다.

 

동기는 둘 다 필요하기 때문에 디자인과 사업 철학을 관통하는 카피라이팅과 디자인을 하이브리드형으로 혼합하여 제작하였다.

 

모바일 화면과 PC화면 등 고객의 관점에서 지속적으로 접속하여 가독성 등을 고려하며 작업했다.

제작하기

이 글은 HTML에 대해 아무것도 모르는 분들을 위해 최대한 쉽게 풀어서 설명했습니다. 그러나 이미지 디자인에 대한 지식이나 방법은 알고 계셔야 합니다. 이 글은 FHD 해상도로 제작하는 기준으로 작성하였습니다. 그러나 width 2560px까지 대응하는 디자인이 더 좋습니다. (fhd도 상관은 없습니다.) 기본 원리는 똑같으니 설명을 그대로 읽으시고, 템플릿 파일을 직접 수정해서 작업하시거나 2560px용 템플릿 파일은 글의 맨 뒤에 올려두었으니 참고하시면 됩니다.

로고

추후 인쇄물에서도 사용할 것을 고려하여 일러스트레이터로 제작해주었다.

동기가 작명한 사업장의 이름은 '방충망사나이'지만 사실 방충망과 크게 관련이 있는 것은 아니고,

남성성을 강조하는 컨셉도 아니기 때문에 로고에서 남성성은 올림머리 정도로만 강조하고, 청년 창업가의 이미지를 더 부각시키는 캐릭터로 제작해주었다.

 

일러스트레이터는 이전 회사에서 일하면서, 마케팅이 필요 없는 회사(정부 보조기관)였지만 우리의 활동을 널리 알리고 싶어 판촉물 인쇄와 온라인 브랜딩에 대해 필요성을 느껴 유튜브로 조금 배웠다.

실제로 업무 차량과 유니폼 뒷면에 출력해서 잘 사용하고 있다.

전단지

위 전단지는 내가 제작한 것이 아니라, 이 동기가 다른 업체에서 외주를 받은 것인데 원본 파일을 요구할 수 없는 조건이라고 하여 원본과 동일하게 ai 파일로 제작해준 것이다.

물론 이 정도의 퀄리티라면 동기도 미리캔버스나 망고보드, 캔바 등의 온라인 디자인 툴을 통해 직접 제작할 수 있다고 길을 알려주었다.

물론 동기가 필요하다면 다른 디자인으로도 얼마든지 제작해줄 수 있다.

유튜브 채널아트

 

이 동기는 유튜브 채널도 운영하고자 한다. 유튜브에서는 별도로 마케팅을 한다기 보다 고객들에게 정보를 제공하는 것이 더 좋기 때문에 마케팅 문구를 복잡하게 넣지 않고, 심플하게 제작했다.

이 동기의 브랜드 컬러는 신뢰감이 가는 네이비인데,  밝은 느낌을 주기는 어렵기 때문에 다소 톤이 올라간 블루톤을 사용하여 제작하였다.

제작은 포토샵으로 했다.

홈페이지형 블로그

Before

After

위 두개는 일러스트레이터로 제작한 것이기에 상세한 방법을 다루기에는 양이 너무 많아 다루지 않고, 홈페이지형 블로그는 그 방법을 이 포스트에서 다뤄보고자 한다.

사실 홈페이지형 블로그에 대한 정보는 워낙 많이 있지만, 기본적인 소양이 있어야 이해가 빠른데 이를 아무 것도 모르는 사람의 입장에서 최대한 쉽게 풀어보고자 한다.

 

이 경우엔 네이버 블로그에 대해 다룬다. 보통 사업자는 티스토리 블로그 보다는 검색엔진 노출에서 더 유리한 네이버를 많이 이용한다.

잘 갖춰진 홈페이지를 하나 만들면 기업의 얼굴을 메이크업 하는 것과 다름 없기 때문에 더할 나위 없이 좋겠지만, 1인 창업자의 입장에서는 수백 만원에 달하는 홈페이지를 만드는 것 자체가 부담이고, 또 그 페이지를 계속 유지보수 해야 하는 에너지도 상당히 소요된다.

 

내가 이전에 일했던 행정 보조기관이 딱 그런 포지션이었는데, 5인 미만 사업장이었는데 수백만원을 들여 홈페이지를 구축했는데 5명 중에서 배정된 관리 인력이 없었다. 타지역의 홈페이지를 보더라도 관리 인력이 있더라도 업데이트 주기가 늦어 사실상 유령사이트처럼 보이기도 한다.

 

건물을 그럴싸하게 만들어놓고 이용하는 사람이 없어 유휴시설로 흉물스럽게 방치되는 것은, 차라리 그 자리에 건물이 없는 것보다 더 마이너스 효과이다.

 

그래서 검색엔진 노출에도 유리하고, 유지보수 하기에 접근성이 좋으며 서버 관리도 직접할 필요가 없는 네이버에서 제공하는 블로그 플랫폼을 이용하는 것이 훨씬 나은 선택인 것 같다.

홈페이지형 블로그의 구성

네이버 블로그를 홈페이지형 블로그로 만들기 위해서는 네이버 블로그의 구성을 이해해야 한다.

위 이미지는 아무 것도 세팅되어 있지 않은 블로그의 메인이다.

1번 : 네이버 자체의 내비게이션바다. 내 블로그와는 관련없이 계속 노출되어야 하는 곳이라 이 영역은 수정이 불가능하다.

2번 : 내 블로그 내에서의 내비게이션바다. 내 블로그에서도 프롤로그, 메모 등의 다른 페이지가 존재하기 때문에 그 곳들을 이동할 수 있는 버튼이라고 생각하면 된다. 이것은 취치를 조정할 순 없고 디자인은 약 변경할 수 있다.

하지만 없애는 것은 불가능하다.

3번 : 위 이미지에서 3번은 2번과 4번 사이의 빈 공간이다. 보통 네이버에서는 '스킨'이나 '타이틀'로 부른다. 일반적으로 간판을 넣는 곳이라고 생각하면 된다. 이 부분에 본인이 원하는 디자인이 웹 배너 형태로 제작해서 들어가야 한다. 지금 위 초기 블로그 세팅에서는 '타이틀'을 활성화하지 않았기 때문에 보이지 않는데, 이처럼 숨기기도 가능하다. 우리는 이따가 이 영역을 숨기기 해야 한다.

숨기고 나서 웹배너를 타이틀로 넣는 것이 아니라 블로그의 배경화면으로 넣어야 한다.

이유는 위 이미지에서 보면 1번부터 6번까지 전부 폭이 동일한 것을 볼 수 있는데 실제로 일반적인 모니터는 좌-우로 훨씬 더 긴데 저 영역들은 실제 모니터보다 좁게 되어 있어 홈페이지형 블로그처럼 꽉찬 이미지를 넣을 순 없다.

따라서 블로그의 배경으로 넣을 것이기 때문에 타이틀은 비활성화 할 것이다.

참고로 타이틀 영역을 일부러 살려서 해당 부분을 빈칸으로 만들고 아래부터 배경을 넣어도 된다. 그러면 진짜 홈페이지처럼 보이는 연출도 할 수 있다.

4번 : 내 블로그의 사이드바다. 블로그 내에서 내가 만든 카테고리를 이동할 수도 있고 그 외에 내가 노출해야겠다고 생각하는 정보를 카테고리나 페이지가 전환되더라도 계속해서 노출시키는 정보들이다.

위 이미지에서는 5번 본문 영역보다 위에 있지만 홈페이지형 블로그를 만들 때는 일반적으로 본문보다 아래로 내리는 것이 깔끔하고 이 글에서도 그렇게 할 것이다.

5번 : 본문영역 게시글이 표시되는 영역이다. 이따가 배경 이미지를 제작하는 과정에서 배경 이미지를 너무 작거나 크게 제작하면 이 부분에 이미지가 겹쳐서 표기되기도 한다. 따라서 그럴 땐 이따가 추가하게 될 투명위젯이라는 것의 높이를 조정하여 이 영역의 위치를 조정해야 할 필요가 있다.

6번 : 이  블로그의 푸터이다. 일반적으로 하단에 위치하고, 저작권 정보 등에 대해 표기한다.

배경이미지 만들기

배경이미지를 먼저 만들든, 블로그 레이아웃을 먼저 만들든 크게 상관은 없지만 HTML이나 디자인 등에 문외한인 경우 이해가 빠르도록 글의 내용을 배경이미지 만들기부터 설명하겠다.

 

포토샵을 이용하면 간편하다. 하지만 포토샵을 사용하지 못하는 분은 미리캔버스, 망고보드 등의 온라인 디자인 툴로도 제작이 가능하다.

일반적으로 웹 브라우저의 출력 비율이 100%라고 가정했을 때 가장 많이 사용하는 모니터가 가로 1920px의 FHD 해상도를 가지고 있을 것이다. 따라서 다양한 모니터를 전부 고려할 순 없고, FHD 기준으로 제작한다.

그러나 세로는 본인이 의도하는 바에 따라 조정이 가능하다. 세로가 길어지면 투명위젯의 개수를 늘려서 아이콘이 클릭되는 범위만 조정해주면 된다. 투명위젯은 이제 설명하도록 하겠다.

 

포토샵용, 웹 툴용 가이드라인 이미지를 심플하게 제작해봤다.

인터넷에 많이 배포되고 있는 가이드라인을 이용해도 좋다. 하지만 본인은 칼같이 제단하여 제작할 것이 아니기 때문에 이런 가이드라인이 오히려 디자인을 하는데 방해가 되었던 것 같아 심플 버전으로 다시 만들었다.

내가 디자인 한 것이 화면에서 어디에서 보여지는지 원리만 알면 가이드라인은 필요없다. 그리고 이용하고 싶어도 웹 디자인 툴은 가이드라인 켜기도 까다롭다.

 

PSD 포토샵용 가이드 이미지

홈페이지형블로그_가이드라인.psd

0.47MB

 

웹 디자인툴용 가이드 이미지

 

위 가이드 이미지는 1920x790px 기준으로 제작했다.

필자가 위에서 만든 방충망사나이 홈페이지형 블로그 디자인과 같은 크기이다.

1920을 더 작거나 길게 늘릴 수도 있지만 크게 의미가 없고, 특별히 디자인적인 역량이 있어 의도하는 바가 있는 것이 아니면 가로는 1920px로 둔다.

 

그리고 세로는 본인의 의도에 따라 줄이거나 늘리거나 할 수 있다.

필자가 제작한 것을 보면 화면을 꽉 채우지 않고 본문 영역이 살짝 보이게 제작한 것을 알 수 있는데, 그렇게 제작한 이유는 꽉 차게 제작한 홈페이지형 블로그를 방문해보니 이것이 블로그인지 홈페이지인지, 아니면 단순 이미지인지 구분이 잘 되지 않을 때도 있어 페이지를 나가거나 뒤로가기를 하는 경우도 있었다. 따라서 블로그임을 보여주기 위해서 약간 공간을 남겼다.

 

만약 더 줄이거나 채우고 싶다면 세로 790px을 조정하면 된다.

대신 이따가 나올 투명위젯의 크기도 같이 조절해주어야 한다.

내가 의도하고 싶은 만큼 확인하는 방법은 웹 브라우저의 확대비율을 100%로 한 상태에서 그대로 캡쳐하여 사이즈를 확인하면 된다.

 

가이드 이미지 설명

빨간색 박스와 흰색 박스는 위치를 수정할 수 없다. 따라서 이 부분에 '블로그'와 같은 글자가 표기되기 때문에 내가 만드는 디자인과 겹치게 되면 이미지가 망가지므로, 이 영역을 피해서 디자인한다. 꾸미지 말라는 것이 아니라 해당 영역에는 내가 의도하는 텍스트가 들어가서 겹치지 않게 하라는 의미이다.

 

초록색 박스 5개는 아이콘이 실제로 클릭이 되는 영역을 의미한다. 아이콘을 어떻게 디자인하든 디자이너의 마음이지만 저 부분이 클릭이 되는 영역이니, 웬만하면 저 안에서 디자인하는 것이 좋다. 참고로 자로 재듯 정확한 위치는 아니다.

만약 정말 정확한 위치를 알고 싶다면 후술하는 방법으로 직접 모니터상의 좌표값을 알아내서 작업해야 한다.

 

그 외의 보라색 영역을 본인의 입맛에 맞게 꾸며주면 된다.

다만 핵심적인 정보는 아래 이미지에서 노란색 박스 안으로 넣는 것을 추천한다.

모바일 (스마트폰, 태블릿)에서 PC버전으로 이 블로그에 접속하면 네이버 메뉴 영역, 내 블로그 메뉴 영역을 기준으로 바깥 영역은 보이지 않는다.

제작한 이미지 배경으로 삽입하기

블로그 관리 - 꾸미기 설정 - 스킨 선택 - 세부 디자인 설정으로 진입한다.

스킨배경 - 직접등록 - 파일 등록을 눌러 내가 방금 만든 이미지를 업로드하고 마지막으로 적용을 눌러 이탈하면 된다.

그리고 블로그를 보면 본문 뒤로 이미지가 쭉 들어가 있어서 엉망이 될 것이다.

그래서 본문영역을 밑으로 쭉 내리기 위해 눈에 보이진 않는 투명한 이미지를 위젯으로 만들어 추가할 것이다.

 

블로그 레이아웃 편집 (투명위젯 추가)

블로그 관리 - 꾸미기 설정 - 스킨 선택 - 레이아웃 설정으로 진입한다.

 

드래그앤 드랍으로 간편하게 블로그의 구성을 바꿀 수 있는 편한 툴이다.

보통 웹페이지에서 이런 구성을 변경할 때는 HTML 코드를 사용해서 구조를 바꾸어야 하는데, 마우스를 끌고 움직이는 것만으로도 간편하게 수정할 수 있다는 것이 장점이다.

 

아까 위에서 설명했던 것처럼 X표가 있어 없앨 수 있는 것이 있고, X표가 없어서 없앨 수 없는 것이 있다.

홈페이지형 블로그를 만들기 위해 필요한 세팅을 아래에서 확인해보겠다.

그러면 아래와 같은 화면이 나온다.

 

 

여기에서 먼저 우측에서 아래와 같이 본문 영역의 넓이를 늘린다.

이것의 의미는 HTML에서는 Body에 해당하는 부분, 즉 모든 내용을 좌측으로 쏠리게 할 것이나 중앙정렬할 것이냐인데, 일반적으로 대칭이 맞지 않는 디자인은 보는 사람이 불편하므로 중앙으로 하는 것이 좋고,

글 영역은 모바일 기기를 고려하여 일반적으로 보통 (좁은 것)으로 설정되어 있는데 PC로 접속하더라도 모바일 버전으로 자동으로 바뀌기 때문에 우리는 PC버전을 고려한 디자인을 할 것이기에 글 영역도 넓게로 바꾸어 준다.

보통으로 하면 아래와 같이 모니터는 넓은데 본문이 너무 좁게 나와있어 PC 사용자에게는 답답하게 보일 수 있다. 시원시원한 디자인을 위해 바꾸는 것을 추천한다.

 

 

최종적으로 만들어야 하는 레이아웃은 아래와 같다.

필자는 의도적으로 타이틀은 제거했다. 필요에 따라 응용이 가능하다면 타이틀을 넣어도 된다.

 

 

 

위에서 공백01~05, 그리고 위젯01~05는 필자가 임의로 만든 이름이고 어떤 이름으로 만들어도 상관없다. 본인이 알아볼 수 있게만 하면 된다.

위젯 추가는 하단부에서 위젯직접등록 버튼을 눌러 가능하다.

다만 지금은 아무런 위젯이 추가되지 않을 것이다.

위젯이름과 위젯코드까지 같이 입력해야 추가가 가능하다.

이곳에 투명해서 아무 그림이 없지만 사이즈는 있어 영역만 차지하는 투명위젯의 HTML 코드를 넣어서 만들어야 한다.

 

설명하자면 공백01~05는 말 그대로 아무것도 없이 자리만 차지하는 위젯이다.

위젯01~05는 투명하지만 아이콘을 클릭할 수 있는 영역이 있어서 자리를 차지함과 동시에 클릭할 때 내가 원하는 페이지로 이동시켜줄 수 있는 기능까지 포함하고 있다.

 

투명 위젯을 2단으로 배치한 이유는 투명위젯 하나당 가로 170px, 세로 600px이 한계다.

이것을 응용하면 아이콘이 5개가 아니라 2개, 3개인 것도 만들 수 있고, 1열 3개, 2열 5개 이런 식으로 자유도 높게 배치할 수 있다. 지금은 1개열에 5개의 아이콘이 들어간 가장 베이직한 형태로 제작하겠다.

 

공백위젯 소스 코드

투명01~05 위젯에는 아래의 코드를 그대로 복사해서 붙여 넣는다.

<img src="https://postfiles.pstatic.net/MjAyMDA3MTNfMTg5/MDAxNTk0NTY3NzY1NjYx.OWpJJ71E2--2CX06LnIh6MW6Noe6mfLi-kgZ2PWSTCgg.LNhChy4Yi827s2W2hRPPwLXV9ml4hHCSfZgrn25aqbsg.PNG.woojooboss/%ED%88%AC%EB%AA%85%EC%9C%84%EC%A0%AF1.png?type=w966" usemap="#center" height="180px" />

코드의 마지막에 보면 height="180px" 이 부분이 투명 위젯의 높이를 지정하는 설정이다. 필요에 따라서 지정하면 되고, 5개 아이콘이 아니라 3개 등으로 수정할 것이라면 width="00px"  속성값을 넣어 조정하면 된다.

투명위젯 소스 코드 (실제 아이콘 클릭 이벤트가 이루어지는 곳)

투명01~05 위젯에는 아래의 코드를 그대로 복사해서 붙여 넣는다.

<img src="https://postfiles.pstatic.net/MjAyMDA3MTNfMTg5/MDAxNTk0NTY3NzY1NjYx.OWpJJ71E2--2CX06LnIh6MW6Noe6mfLi-kgZ2PWSTCgg.LNhChy4Yi827s2W2hRPPwLXV9ml4hHCSfZgrn25aqbsg.PNG.woojooboss/%ED%88%AC%EB%AA%85%EC%9C%84%EC%A0%AF1.png?type=w966" usemap="#center" /> 

<map name="center"> 

<area shape="rect" coords="1,295,167,460" href="https://blog.naver.com/PostList.naver?blogId=bug_block&amp;from=postList&amp;categoryNo=7" target="_top" /></map>

 

속성 설명

href: 따옴표 안에는 웹페이지 url이 있다. 이 아이콘을 클랙해서 이동시키고 싶은 곳의 url을 삽입하면 된다.

taget : 클릭했을 때 해당 url의 페이지를 새 창으로 띄울 것인지, 현재 창에서 이동시킬 것인지 정하는 것. 만약 이동시키려고 하는 url이 내 블로그 안에 있는 카테고리이거나 게시글이면 새창 보다는 현재창을 이용하는게 방문자들이 덜 번거로울 것이고, 외부 페이지라면 새 창으로 띄워야 현재 내 블로그에서 이탈하지 않게 될 것이다. 두 가지를 적절히 섞어서 사용하면 된다.

_top 을 넣으면 현재창에서 url로 이동하고, _blank 를 넣으면 새 창으로 띄워진다.

coords : 투명 위젯 전체가 아닌 클릭 이벤트가 일어날 좌표 (영역)

위의 예제에서는 클릭 이벤트가 발생하는 시작지점의 좌표가 (1, 295)이고, 끝나는 지점이 (167,460)이라는 의미이다.

아래는 투명위젯 사진 파일이다. 투명한 이미지라 그냥 보면 안 보인다. 드래그해서 확인할 수 있다.

그림판에서 위 파일을 열면 마우스 포인터를 어디에 놓느냐에 따라 왼쪽 아래에 좌표가 표기된다.

 

위 좌표값을 수정해서 아이콘 클릭 위치를 바꾸고자 할 때는 위처럼 확인하면 되고,

클릭 위치의 영역은 아래 이미지처럼 결정된다.

공백 위젯에는 위처럼 클릭 이벤트가 발생하는 영역을 지정하는 HTML 태그인 area 태그가 사용되지 않고, map을 통해 맵핑해주지도 않은 것을 알 수 있다.

공백 위젯을 1열에 넣은 이유는 위에서도 언급했듯 네이버에서 지원하는 위젯의 최대 크기가 가로 170px, 세로 600px이기 때문에,

화면을 거의 가득 채우는 지금 디자인에서는 위젯 하나로는 클릭 이벤트가 발생할 area를 만들 수 없기 때문에 빈 위젯을 넣은 것이다.

만약 디자인이 블로그를 덮다 못해 밑으로 계속 되어 있어 랜딩페이지처럼 만들고자 하는 경우에는 공백 위젯의 길이를 늘리거나 3열, 4열 계속 추가하면 얼마든지 가능하다. 클릭 이벤트는 필요없고 이미지만 넣고 싶다고 할 때도 소스코드에서 <map>부터 지워주면 된다.

 

참고로 위 소스에서는 height 높이만 속성으로 지정하고 width는 지정하지 않았는데, 저 투명 위젯 사진 크기가 네이버 위젯 크기의 맥시멈으로 제작된 것이기에 아무 값도 넣지 않으면 자동으로 170px, 600px로 설정된다. 더 늘리는 것은 불가능하니 내가 줄이고 싶은 부분의 속성만 넣어주면 된다.

그러면 아래와 같이 미리보기가 나올 것이다.

 

 

 

설명은 모두 끝났다. 수정하고 적용 시킨 다음 블로그로 가서 잘 맞아 떨어지는지, 가독성은 나쁘지 않은지 확인해보면 이 작업은 마무리 된다.

 

추가적으로 배경이미지에서 세로 높이에 제한이 없듯 가로 폭이 꼭 1920px일 필요는 없다.

일반적인 모니터 환경이 1920px이기 때문에 이에 맞춘 것이고, 더 높은 해상도의 모니터를 이용하는 고객들까지 만족시키고자 한다면

핵심 정보는 1920 안에 모두 표기하되 배경 이미지를 제작할 때 만든 이미지 패턴을 자연스럽게 연결되도록 더 크게 만들면 된다.

 

보통 웹브라우저를 사용하는 유저가 웹 페이지를 축소해서 보는 경우는 거의 없다. 대부분 확대를 할 것이다.

확대할 때는 1920px로 제작하는 것이 문제가 되지 않는다.

다만 축소를 하면 아래와 같이 나온다는 점을 인지하고, 더 완벽하게 작업하고 싶다면 1920px보다 더 크게 작업하는 것도 좋다.

 

이미 구축이 완료되었지만, 필자는 완벽을 추구하기 위해 투명의 area 위젯 좌표값도 수정할 예정이고 배경의 패턴을 옆으로 더 늘려서 교체할 예정이다. (사실 이미 그렇게 작업했다. 배경 이미지를 더 넓게 작업해놨다.)

배경은 이미 qhd 모니터까지 대응할 수 있도록 교체했다.

 

QHD용 템플릿

홈페이지형블로그_가이드라인 2560.psd

0.64MB