사이드바 영역으로 건너뛰기

마인드바꾸기 대문바꾸기

이 글은 진보네님의 [트랙 팩 07 : 불로그 관리 TIP] 에 관련된 글입니다.


 

새해인사가 아니라 블로그 TIP이라니..ㅋㅋ

쌩뚱맞게 한 해를 시작해보자^^(새해선물로 드리고픈 맘도 약간은 담아~)

 

디자인은 “발상뒤집기”에서부터 연유합니다.


언뜻 제 대문을 보면 이미지제작을 굉장히 요하는 것이라 오해하기 쉬운데 이미지가

실제 적용된 곳은 부분일 뿐 전반적으로 진보네의 UI 틀거리안에서 약간의 꼼수만

부린정도라고 할까요?


제 대문 디자인에서의 최대 관건은 UI를 활용한 적절한 디자인컨셉과 신선한 칼라입니다.
제 Tip이 넘 시시해서 실망할지도 모릅니다.
하지만 공간에 대한 활용방안과 컨셉방향에 대한 살짝의 감을 잡으셨다면 제가 바라는

교육은 충분히 이루어진거라 생각합니다~

아래 글이 진보블로거들의 대문만들기 아이디어 찾기와 멋찐 제작에 일조가능하길

바라는 맘으로부터 이 매뉴얼을 시작합니다.

 


1. UI 이해하기


진보네 블로그의 전체 UI(User Interface)구성은 이렇죠?

(공통사항은 화면관리/메뉴위치설정/왼쪽-->메뉴위치설정은 개인적 취향에 따라 바뀌어도 무방)


미갱대문 UI_화면관리/화면정렬설정/블로그 전체화면 가운데정렬

 

 

hand 님 대문 UI_화면관리/화면정렬설정/블로그 전체화면 왼쪽정렬

 

산오리님 대문 UI_화면관리/화면정렬설정/블로그 전체화면 오른쪽정렬

 

세개의 차별지점은 이미지를 적용한 영역과 크기의 차이입니다.
이미지적용을 어디에, 무엇으로, 얼마만한 크기로 하느냐에 따라 디자인 분위기의

결과물도 많이 달라보인답니다.

 

 미갱TIP

" 화면정렬설정은 {왼쪽/가운데/오른쪽} 이렇게 세가지 종류가 선택가능하죠.

  저는 대부분 {가운데} 정렬을 선호하는 편인데 이유는 간단합니다.

  UI는 인지심리학적인 측면이 매우 강한데요. 브라우져의 크기에 따라 전체화면이 움직이는데

  사용자에 따라 브라우져 크기는 변동가능하므로 가장 안정적인 위치, 사용자의 시선이

  어디한쪽으로 치우침이 없이 편안한 위치, 마우스의 동선이 가까우면서 익숙한 위치의

  {가운데}를 가져가는 거랍니다.

  하지만 블로그는 개인이 원하는 선호/취향에 따라 꾸미기가 가능한 공간이므로

  전체화면의 위치는 어디건 크게 문제되진 않다 사료됩니다 "

 


UI의 이미지적용방법에 따라 디자인분위기가 차별화되어질 수있다는 것은

제 대문과 산오리님, hand님의 대문을 비교해서 설명드리겠습니다.

 

 



1) Top영역을 이미지로 적용한 경우

전체화면 가운데 정렬

 

    (메뉴의 가로폭+포스트영역=Top이미지의 가로폭)
    : 제 대문에서 이미지를 적용한 부분은 “Top 영역”입니다.
      Top영역의 이미지적용을 제외하면 나머지 배경, 공통메뉴, 메뉴영역은 칼라만 적용

      정도입니다. 각 공간이 어떻게 나누어져 있는지에 대한 이해한다면 그 공간을

      디자인컨셉에 따라 어떻게 활용할 것이냐가 관건이었답니다^^

 

전체화면 오른쪽 정렬

 

     (메뉴의 가로폭+포스트영역=Top이미지의 가로폭)
    : 산오리님 대문도 이미지를 적용한 부분은 “Top 영역”입니다.
      Top영역의 이미지적용을 제외하면 나머지 배경, 공통메뉴, 메뉴영역은 칼라만 적용

      제 대문과 동일한 방법이구요. 배경의 칼라는 흰색으로 가져간 이유는 제가 살짝 꼼수를

      부린 케이스인데요. 배경, 공통메뉴, 메뉴영역은 칼라를 모두 수정하기에는 HTML과

      css의 수정이 필요한데 초보자에게는 쉬운 일이 아니라 그냥 아무것도 건드리지 않는

      방법 을 택한거지요^^

      이미지제작의 컨셉에 따라 많은 수정을 요하지 않는 방법도 있다 이거랍니다~

 

2) 왼쪽메뉴영역을 이미지로 적용한 경우/프로필이미지를 적용해서 활용한 경우

 

    (메뉴의 가로폭=이미지의 가로폭)
    : 프로필이미지 를 Main Image로 사용한 경우입니다.

      상대적으로 Top영역 은 텍스트의 크기와 칼라를 조정했고 공통메뉴, top배경 ,전체배경

      영역의 칼라 동일 적용, 요기서 포인트는 이미지와 텍스트칼라를 배경칼라와 유사색으로
      조정함으로써 전체 분위기가 조화를 이루는 디자인이라고 생각이 됩니다~

 

각 영역에 이미지를 실제 적용한 것은 이렇게 보여지겠지요.

많이 달라져보이죠?
세가지 디자인예에서 알수있듯이 UI의 공간을 무엇으로 어떻게 활용하느냐에 따라
디자인은 천차만별이 될 수 있답니다.

 

몇가지 다양한 경우를 예상해보면


3) 전체배경을 이미지로 적용 
    : 싸이 나 네이버처럼 브라우져크기자체를 조절해서 전체배경을 이미지로 덮어버리
      방법도 있답니다. 브라우져크기까지 조정하지 않더래도 배경의 pattern처리부분
      을 해제하고 원하는 해상도의 이미지크기로 제작하셔서 전체배경대신 써도
      좋겠지요~


4) 전체UI위치조정
     : 전체화면 UI는 왼쪽/오른쪽/중간 정렬만 가능한데 이 틀을 완전히 벗어나고자 한다면

       잼나고 다양한 UI로  디자인결과 또한 풍부해질 가능성 100%보장.

       단 HTML과 css, php등의 개발프로그램 능력이 받쳐주거나 아님 부단히 노력해서

       공부하거나...쩝..이건 도움이 안되는 말이지만 현실인걸..


5) 기타
     : 여러분의 아이디어를 요합니다.

 

 

2. 디자인컨셉 정의하기


아이디어가 필요한 부분입니다.
진보네블로거들에게 보내는 “편지”라는 개념으로 컨셉의 방향을 잡으니 바로 Top
이미지를 살짝 편지지의 느낌을 주고 배경과 상단의 공통메뉴영역에 색으로 채워주
면 되겠다는 판단이 서게 되었답니다.

칼라는 밝고 경쾌한 느낌을 주고싶어 희망적이며 안정적인 칼라 "Green"으로 가져간거구요.
여러분도 한번 시도해보세요.

예를 들어 컨셉을 “하울의 움직이는 성”으로 하게 되면 어떻게 될까요? 아님 앙증맞은

캐릭터 캘시퍼만 가지고 해보면? 이런 컨셉은 영화나 애니를 좋아하는 문화적 감성의

취향을 가진 블로그 주인으로 보이기도 하고 아님 귀엽고 발랄한 성향으로 드러나기도

하지 않을런지요? 
블로그에 자신의 색깔을 이미지로 어떻게 표현할 것인가는 디자인컨셉의 방향에 따라

드러내어지는 거라 생각된답니다.

칼라나 시각적 이미지로 자신이 드러날 수있다니...

잼있지 않나요?

 

 

3. HTML과 css수정하기
 

오늘은 UI이해하기와 디자인마인드가 핵심이니만큼 여기까지...

<공통메뉴와 배경의 색깔입히기> Tip은 조만간에 올리겠습니다~죄송~

 

 

4. 액세서리 Tip
1) 메뉴의 텍스트을 이미지로 변경

    예) 미갱의 메뉴타이틀 이미지바꾸기
2) 포스트타이틀/덧글이름/내용/덧글폼/메뉴배경 칼라

    예) 현근님 방의 덧글 색깔 바꾸기
3) Text select 칼라
4) 메뉴의 border
5) 포스트영역 칼라
6) 아이콘이미지 적용
7) 기타
    : 텍스트의 칼라와 크기(자간/줄간 포함)만으로도 잼있고 다양한 디자인가능함을
      잊지마세요~ 디자인칼라를 하나만 잡고 배경과 select칼라, 타이틀 칼라만 
      조정하여도 분위기는 확 달라보일 거랍니다.

 

 

각자 주어진 공간내에서 최대한 잼나는 결과를 위해 공간활용을 어떻게 할 것인가
를 상상하며 컨셉을 완성시켜나가보세요~ 잼나는 결과들이 나올 것 같은데..?

 

각자의 공간(UI)에 대한 아이디어와 디자인컨셉으로 최대한 잼나게 자신을 드러내보세요~


저 또한 여러가지 UI와 디자인에 대한 실험을 앞으로 제 대문에서 가져볼까 합니다.
그러기 위해서 일단 전제되어야 할 것이 진보네에서 제공하는 UI가 아닌 기본틀을

수정할 수 있는 코딩능력이 있을 것. 또한 역동적인 재미를 줄수 있는 flash기법 등

다양한 툴활용과 매체의 접목, 미디어의 적용 등으로 대문디자인의 품질과 재미를

훨씬 높일수 있는 방법을 찾아나가도록 하겠습니다~

 

액세서리 Tip은 몇 개 더 매뉴얼을 만들어 올리도록 하겠습니다.

이만 끝!

 


진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크