가끔씩 오유 눈팅하다가 글에 배경이 있으면 신기하더라고요
신기한 김에 함 만들어 봤습니다
그 와중에 알게된 팁들 몇개를 공유합니다
결론적으로 "오유 배경 깔끔하게 넣는 방법"이 되겠네요
1. 오유 배경넣기
그럼 일단 오유 배경넣는 방법부터 알아보겠습니다
오유에 로그인한 다음 오른쪽 맨 윗부분을 보면 정보변경 란이 있어요
클릭해서 들어가면 개인정보를 바꿀 수가 있는데 그중에
“꾸미기” 항목을 바꿔주면 됩니다
요 칸인데요. 이 중 중요한 옵션을 화살표로 체크해 두었습니다
글 배경 이미지는 게시글 양 옆의 공백부분을 채워줄 이미지를 선택하는 옵션입니다
핵심이라고 볼 수 있죠
두 번째로 타일배경과 채우기 옵션이 있는데
타일배경은 게시글 스크롤을 내릴 때 자기가 고른 이미지가 쭉 반복되면서 같이 내려갑니다
반면 채우기를 고르게 되면 게시글 스크롤과 상관없이 배경이 움직이지 않고 고정됩니다
(만약 세로로 긴 그림을 넣었다고 해도 채우기를 고르면 위쪽 일부만 고정되서 나오겠죠)
저는 같이 움직이길 원해서 타일에 체크했고 위치는 12시 방향을 골라줍니다
다음은 이미지를 어떻게 설정하는가인데
그냥 이미지 파일은 업로드가 안되는 모양이더군요
그래서 링크를 걸어야 합니다
검색해보니 imgur을 이용하는 경우가 대다수여서 저도 imgur을 써보기로 했습니다
imgur는 이미지 사이트인데
위 링크로 가서 이메일 입력하고 회원가입 후 이미지를 업로드해 줍니다
왼쪽 상단의 upload images를 클릭한 다음
올리는 옵션에서 컴에서 올리기, url입력 또는 드래그 방식으로도 가능합니다
그담에 확인창인 start upload를 누르면 업로드가 시작되는데
업로드가 완료되면 왼쪽에 그림이 뜨고 오른쪽에 그림 정보가 뜹니다
필요한건 다이렉트 링크인데 숨어있어서 more를 눌러 정보를 확인합니다
정보창이 늘어났죠
direct link 항목을 눌러서 복사해준 다음
오유 정보변경-꾸미기의 이미지 주소에 붙여넣어 줍니다
그런 다음 정보변경-확인창을 눌러 배경 이미지를 최종 입력해줍니다
그러면 곧 성공적으로 바꾸었다는 메시지가 뜨면서 배경이 들어가게 되죠
여기까지가 간략한 “오유 배경 넣는 방법”이었습니다
다음으로는 좀 더 깔끔하게 넣는 방법을 알아보겠습니다
2. 깔끔하게 넣기
처음으로 시도해본 배경입니다
음.. fail 문구가 붙어있는 쪽이 마음에 안 드는 부분입니다
왼쪽에는 화면이 깔끔하게 떨어지지 않고 끝나서 오른쪽 이미지의 일부가 조금 붙어버렸고
오른쪽에는 넣어준 이미지의 상당량이 게시글 영역과 겹쳐 잘려버리네요
그냥 쓸 수도 있었지만 기왕 열심히 찾은 그림들인데 깔끔하게 만들고 싶어서
저는 이 두 문제를 해결해 보기로 합니다
a. 타일 조각 없애기
이 문제는 간단했습니다
왜 깔끔하게 끝나지 않고 여백이 남아서 반대편 이미지가 붙어버릴까
잠시 생각해보니..
그건 걍 업로드한 이미지의 해상도가 화면의 전체 해상도보다 작다는 이야기였죠
그렇기 때문에 여백이 발생했고 반대편 끝의 이미지를 끌어와 붙인 거죠
배경넣기 방법을 올려주신 분이 샘플로 파일을 하나 올려주셨는데
이 이미지의 가로폭 픽셀이 기본 화면창 가로폭 픽셀보다 작았던 것입니다.
저는 그 사이즈를 기준으로 만들어서 같은 오류가 있었던 것이고요
그래서 모니터의 기본 해상도인 1920픽셀로 바꿔보았습니다
그랬더니 바로 해결되는군요!!
b. 최적화 가로폭 찾기
두 번째는 오른쪽의 오류 그러니까 업로드한 이미지의 일부가 잘려버리는걸 막기 위함입니다
가로폭 해상도를 1920픽셀로 바꾼 베이스에
이번엔 잘리지 않도록 대강 가로폭을 줄인 그림들을 넣어보았습니다.
역시나 이번엔 공백이 꽤 남는군요
헛..! 그런데 중요한 포인트를 하나 발견했습니다
위 사진의 경우 오른쪽과 왼쪽 그림들의 가로폭은 같습니다
그러면 중앙의 게시글 테두리로부터 남는 여백도 당연히 같을거라 생각했지요
그런데 위 사진에서 보이는 것처럼
중앙쪽 게시판 테두리로부터 남는 여백의 폭이 차이가 납니다
여기서 하나의 발견!!
오유 게시글은 좌우 균형이 아니었어요
위 사진에서 왼쪽에 공백이 더 많이 남는 것에서 알 수 있듯이
게시글을 기준으로 조금이지만 왼쪽 여백이 더 컸던 것입니다!!
그렇다면 저는 이번엔 대강의 눈대중이 아니라
걍 첨부터 오른쪽 왼쪽 여백의 가로픽셀을 측정해서
그 사이즈에 맞춘 그림들을 넣어보기로 합니다
중앙 게시글 경계선으로부터의 왼쪽 여백의 가로폭이 560픽셀인 것을 확인했습니다
반대편 오른쪽도 확인해보니 535픽셀이 나오는군요
양쪽의 그림을 이 가로 폭들에 맞추어 올리면
게시글 경계선부터는 여백없이 그림으로 채워지겠구나 하고 바로 만들어 보았습니다
크으.. 이번에도 양쪽모두 사진 짤림이 발생했군요
좌우비대칭 사실을 알아냈지만 실패한 이유는
경계선과 그림여백 사이의 공간 때문이었습니다
거의 안보이는 실선 수준이지만 중앙 게시글을 들러싼 경계선과 (하늘색 선)
배경넣기로 그림을 넣을수 있는 양쪽 여백의 사이에는
기본적으로 그림이 못들어가는 조금의 폭이 존재했던 것입니다 (붉은 빗금)
게시글을 둘러싸고 흰여백 없이 그림을 넣는 것은 처음부터 불가능한 것이었군요!
그렇다면 붉은색 X빗금을 쳐놓은 저 공간만큼만 빼면
양쪽에 그림이 들어갈 수 있는 최대 사이즈가 나올 것입니다
X빗금의 가로픽셀사이즈를 재어보니 15px
그러면 560px, 535px에서 15만큼을 뺀 545px, 520px가 최대 최적 사이즈겠죠
바로 만들어 보도록 하겠습니다
오오 드디어 균형을 맞췄습니다
중앙의 게시글과 경계선을 기준으로(하늘색 선)
똑같은 여백을 두고 배열된 양쪽 그림입니다
사실 오른쪽과 왼쪽 그림의 가로폭 크기가 25px크기만큼 다르기 때문에
완전한 좌우 균형이라고 할 순 없지만
눈으로 보기에는 크게 차이나지 않기 때문에 이렇게 배열하는게 좋다고 생각합니다..
정리하면
오유 게시글 배경을 타일식으로 넣어줄 경우
가로폭 크기는 1920픽셀
하지만 좌우여백 크기가 달라 왼쪽은 545픽셀 오른쪽은 520픽셀로 넣는다
게시글을 둘러싼 흰 여백을 늘리고 싶은 경우 545-x, 520-x픽셀로 넣어준다
이렇게 되겠습니다
545 15 825 15 520 라는 구조를 기억해 둠으로써
여타 다른 모양으로 넣을 때도 유격을 없앨 수 있겠죠
그리고 한가지 맹점이 또 있는데
정보변경-꾸미기를 통해 배경을 만들고 자기 글을 확인해 볼 때
보통 닉네임을 누르고 자기 페이지 들어가서 확인을 할 것입니다
그런데 개인페이지의 좌우 밸런스는 3자가 보통 글을 읽을 때와 또 다릅니다
개인페이지에서는 개인페이지 박스가 왼쪽에 붙어있어서
큰 왼쪽 여백이 더욱 커지고 오른쪽 여백이 줄어들어요
하지만 보통 자기가 쓴 글이라도
자기가 보는 횟수보다는 다른 유저들이 보는 경우가 더 많을 것이기 때문에
검색 등을 통해 3자가 글을 보는 경우에 맞춘 그림 배열이 더 좋겠죠
제가 하고 싶은 말은
개인페이지에 뜨는 그림 배열을 보고 깔끔하게 맞춰서 배경을 넣을 경우
다른 유저가 개인페이지 외 루트를 통해 자기 글을 볼 때 유격과 비대칭이 발생합니다
그러니 첨부터 개인페이지가 아닌 보통 버전에 맞춰 배열하는 것이 좋아요
다른 특이사항으로는
배경이랑 댓글배경 모두 유저와 1-1대응이 되는 것들이라
오늘 배경을 넣었다 하면 그전에 썼던 게시글 전부에도 적용됩니다
게시글 하나하나에 맞춰줄 순 없다는 이야기죠
그래서 저도 원래 컬러감 살려서 4계절 버전 정도는 만들려고 했는데
실험해보니 유저당 배경 하나라서 걍 대강 섞어서 하나로 만들었어요
상당히 길었는데 어쨌든 최적화 px수치를 찾았으니
다음 댓글 배경으로 넘어가 보겠습니다
3. 댓글배경 넣기
댓글 배경을 넣을 때 가장 중요한 점은
댓글 배경의 세로폭이 100픽셀 정도라는 점입니다
보통 모니터로 봤을 때 3cm정도입니다
가로폭은 기니까 크게 상관이 없는데
대체로 이미지 세로폭은 100픽셀을 가볍게 넘기죠
그럼 세로폭이 100픽셀을 넘는 이미지를 넣으면 어떻게 되는가?
당연히 잘리겠죠
문제는 잘린 다음에 댓글을 죽 입력하면서
많은 행으로 글을 쓰게 되면 잘렸던 아래 부분도 따라 나오는가 하면
그것도 아니라는 점입니다. 입력할 때 잘려버려서 아예 끌어올 수가 없는 것이죠
그러니 처음부터 세로폭을 100픽셀 또는 100픽셀을 조금 웃돌게만 만들어야 합니다
그럼 한 번 댓글배경을 만들어 보겠습니다
이왕 넣는거 움짤로 한번 넣어보겠습니다
뭔가 상큼하면서도 귀기울이는 느낌이 있어 댓글 배경으로 적절하군요!
제가 시도해보니 움짤의 경우는 direct link를 참조하면 안되더군요
올바르지 않은 배경이라고 입력 자체가 안됩니다
이때 당황하지 말고 대신 original gif link를 참조하면 잘 나옵니다
문제는 움짤을 업로드하면 바로 나오는 파일정보에 original link가 없다는 점인데요
역시 당황하지 말고 메인창 오른쪽 상단의 자기 아이디를 클릭해서
바로 뜨는 “images”를 누르면 그간 업로드한 그림들이 나오는데
거기서 원하는 움짤을 클릭하면 오른쪽에 뜨는 파일정보에 original link가 뜹니다
오류 예시도 볼겸 세로폭이 큰 짤을 그냥 넣었을 경우의 댓글창을 보겠습니다
ㅋㅋㅋㅋㅋㅋㅋ
누군인지도 모르겠고
먼가 이쪽을 보려는 거 같은데 아닌지도 알 수 없는 그런 아쉬운 모습입니다
문제는 댓글을 많이 써서 아래로 계속 내려보아도
저 상태에서 고정된 채로 아래 부분을 볼 수가 없습니다. 답답하죠
이점 때문에 100픽셀이 아주 작은 세로폭이라는 문제에도 불구하고
처음부터 댓글배경 이미지의 세로폭을 100픽셀 정도로 줄여서 넣어야할 필요가 있습니다
움짤의 해상도 줄이기는 그림판에서는 아마 안 되고 그림 프로그램으로는 될 것인데
인터넷 링크를 첨부해 두겠습니다. 빠르고 간편해요
이 링크를 타고 가서 Gif Resize를 클릭하고
파일선택이나 url을 입력하고 upload를 눌러줍니다
그러면 자기가 올린 움짤이 재생되는데
여기서 new height가 세로폭 변경값입니다. 이걸 직접 100픽셀로 바꿔주거나
아니면 눈대중으로 밑의 percentage(비율)을 30, 40,50..(퍼센트값 입력) 등으로 입력하고
Resize it!을 누르면 작은 움짤이 만들어지는데 이걸 쓰면 되죠
그렇게 해서 만들어진 게 이 게시글 댓글 배경입니다
상큼하네요. 근데 작아도 너무 작음..
워.. 오유 배경 신기해서 걍 한번 만들어보려 했을 뿐인데
사진들 고르면서 뒤적거리니 몇 년 만에 보는 것들도 많고 나름 재밌었습니다
그렇게 고르는데 시간을 좀 쓰다보니 결과물의 유격이 맘에 안들어서
좀 잘 만들어보자 싶던 게 뜻하지 않게 좌우비대칭도 발견하고 ㅋㅋ
결국 최적 픽셀을 찾긴 찾았네요 ㅋㅋ
다른 분들은 헤메지 마시라고 알게 된 것들을 팁으로 전하고 싶었습니다
그럼 많이들 참고해 주세요
만들고 보니 눈팅러라 글을 거의 안 쓴다는 게 함정이군요!!
