mindFULL.network 5th "the breakthrough"

오랫만에(??) 웹사이트 디자인 하나를 소개한다. 이름하여 mindFULL.network 5번째 버전.

슬라이싱용 이미지. 슬라이싱을 위한 멘트들이 위에 많이 보인다 (..)

전체적으로 중후한 톤으로 가고 싶었다. 네트워크 이전 버전이 좀 심하게 라이트한 디자인이었기 때문이다. 저번에 가볍게 해봤으니 이번엔 한번 무겁고 중후한 디자인을 할 때가 아닌가하는 생각이 들었다.

저번 버전이 얼마나 라이트했는가 물으신다면, 이미지 하나를 보여드리는 게 인지상정.

아, mindFULL과 ZF가 섞여있는 오묘한 현장이여!

이전 버전(편의상 LP버전이라고 하자)이 이랬다. 메인이니 FEATURED CONTENTS 해서 저렇게 박스라도 있지, 세부 페이지에는 박스조차 없었다. 말 그대로 라이트. 심플. 아직 내공이 부족해 그런지, 몇 달 쓰니까 좀 질리더라. 물론 시작페이지로 쓸 정도로 가벼운 건 좋았지만 말이다.

LP버전에선 컬러 사용도 대단히 제한적이었다. 색 이름까진 잘 모르겠고(울트라마린? 아닌거같은데 ㅜㅜ... 나는 이론이 대단히 부족하다 ㅠ), 뭐 여튼 한 톤으로 밀어붙인 모양새였다. 게다가 ZF에서 mindFULL로 넘어오면서 로고를 바꾸다보니, 이건 뭐 블루와 레드가 같이 쓰이는, 언밸런스의 절정이 되어버린 거다.

그래서 이번 버전에선 일단 색을 눈에 띄게 쓰자는 생각으로, 일단 시작하자마자 RGB 컬러로 사각형을 3개 만들어 박아버렸다. 어떻게 배치할까 좀 시행착오를 거치다가, 결국엔 지금의 띄 모양으로 가자고 마음을 먹었고, 그래서 나온 게 저 디자인. 수정을 그렇게 많이 하지는 않은 디자인이다. 어찌 하다보니 LP버전의 정확히 반대에 서있는 디자인이랄까.

P.S. 메뉴 중 웹 디자인 포트폴리오를 정리하면서, 내가 디자인한 게 의외로 많다는 생각이 들었다. 흠..


프로젝트명 - network5
포맷 - 웹/HTML+CSS/웹사이트(PHP)

mindFULL의 디자인은

디자인할 대상을 잘 알아야만 좋은 디자인, 쓸모있는 디자인이 나온다고 생각하기 때문입니다.

특히 웹 디자인이나 편집 디자인과 같은 실용 디자인 분야에서, 스타일보다 중요한 건 바로 컨텐츠의 전달입니다. 물론 멋있고 예쁜 것, 좋지요. 하지만 멋있고 예쁘기만 하다면 그건 실용 디자인이 아니라고 생각합니다. 예술의 분야에 들어간다면 모를까 말이죠.

내용이 풍부한 책이라도, 지저분하고 정리가 잘 되지 않은 느낌이라면 실제로 사람들에게 큰 도움을 못 줄 수도 있습니다. 단어를 외울 때, 사전만 들여다보는 사람은 단어를 잘 외우지 못합니다. 중요 단어가 학습 전략에 맞게 잘 정리된 단어책을 보는 사람이 더 중요한 단어를 빨리 외우곤 하죠. 컨텐츠의 전달의 중요성도 이와 비슷하다고 봅니다.

웹 접근성과 같은 개념을 생각해봅시다. 어느 환경에서 봐도 무리가 없는 디자인은 보다 많은 사람들에게 어필할 수 있는 디자인일 뿐더러, 어느 사람에게는 자신이 배려받고 있다는 느낌을 들게 하기도 합니다.

깨끗하고 명료한 스타일은 가독성 면에서 떨어지지 않으면서도 예쁘다는 느낌을 줍니다. 컨텐츠를 잘 전달해줄 수 있으면서도 호감을 줍니다. 제가 심플하고 깨끗하고 명료한 스타일의 디자인을 선호하는 이유가 바로 이겁니다.

==================================
mindFULL.network에서 발췌. 원래 이 글은 이 블로그에서 쓰여지고 있었다. 거친 문장 투성이였는데, 한번 착 가라앉히고 다시 쓴 글이다.

ZF.blue for WordPress

이번에는 고대(?)의 스킨 하나를 올려본다. 이름하여 ZF.blue for WordPress! 2006년작이다.

ZF.blue for WordPress. 2006년작.

요즘 내가 만들어낸 스킨과는 확연히 다른 느낌이 있달까. 시원시원하게 여백 팍팍 주는 게 아니라, 좁디 좁은 여백에 담겨있는 댓글 제목 창을 보니, '나도 한땐 저랬지' 하는 생각마저 든다.

프로젝트명 - "ZF.blue for WordPress"
포맷 - 웹/HTML+CSS/워드프레스 테마
퍼블리싱 - 배포, 수정 가능

대토론회 주제 홍보물

우리 학교에서는 매년 ‘학생대토론회’란 행사를 연다. 그 주관은 전적으로 비정규(CA시간과 무관하게 운영되는) 서클 과학토론반이 맡는데, 그 홍보 역시 과학토론반이 100% 담당한다.

아래는 그 홍보물들. 필터 범벅. 하얀 A4에 그림을 5분만에 그려서 15부 복사하고, 스캔해서 깨지는 이펙트를 주려다... 학교에 놓고온 걸 알아차리고 5분만에 다시 그려서 스캔했다는 전설이 있다 -_- (그 그림은 차마 원본을 올리기 부끄러우므로 업로드를 생략한다. 그거 붙여놓으니 학교에서는 무슨 ‘장난질’이나 ‘테러’인 줄 알았단다 ㅋㅋㅋ)

프로젝트명 - "대토 2008 주제 홍보"
포맷 - 프린트/A4/컬러

배움을 나누는 사람들 디자인

배움을 나누는 사람들 디자인 원본 파일. 사이드바가 알록달록한 건 이미지 슬라이싱을 위한 것이다.

봉사단체 배움을 나누는 사람들을 위한 디자인. 일단 단체 특성상 '교육'과 관련이 있을 만한 무언가를 컨셉으로 잡으려 교실 책상에서 노닥거리다, 칠판이 확 끌렸다. 그래서... 전체적인 컨셉을 칠판으로 잡았다.

내 자신의 도약의 계기가 된 디자인이라고 생각한다. 일종의 부담감을 안고 디자인한 스킨이었다. 내 맘에만 들면 되는 성격의 디자인은 아니니까. 어떻게 할까 고민을 하다, 일단 윗부분을 무조건 예쁘게 만들어 보자는 걸 제1의 목표로 잡았다.

브러시를 잔뜩 사용했다. 칠판의 느낌을 내기 위해, 그라데이션 위를 불투명도 7% 정도의 하얀 브러시로 문지르고 또 문질렀다. 결과가 참 만족스러웠다. 나중에 previously released에 올라오겠지만, 예전에 나는 칠판 디자인을 시도한 적이 있었다. 조금 저퀄리티 디자인이었는데, 그때에 비하면 정말 장족의 발전이랄까.

프로젝트명 - "배움을 나누는 사람들 웹사이트"
포맷 - 웹/HTML+CSS/웹사이트(PHP)

we rhapsodize 디자인

we rhapsodize 개편 디자인은 정말 속을 많이 썩인 디자인이었다. 세 번에 걸쳐 만들어졌고, 컨셉이 휙휙 뒤집어지길 반복했다.

그 시작은 이랬다.

첫 번째 버전. 전체적으로 기울인 DIN의 느낌을 내보자는 목표가 있었다.

그러다, 일단 우선순위에 올라와있던 ZF.magazine 4 스킨을 만들게 되었고, 그 이후 이 스킨도 그 스킨의 영향인지, 컨셉이 아예 확 뒤집어지고 만다.

두 번째 버전. 주안점은 심플 룩, 그리고 클리어 룩.

참 ... magazine4 스러운 디자인이 아닐 수가 없다. 그러다, 불후의 명작(....) 배나사 웹사이트 디자인을 마무리한 며칠 전, 갑자기 ‘흠... 임팩티브 디자인으로 가는 건 어떨까’ 하는 생각이 갑자기 들고 만다. 그리고... 또다시 타이틀이 갈아엎어졌다.

세 번째 버전. 지금의 모습과 90% 일치. 강렬하게, 강렬하게!!!

그런 거다. 나는 자극적인 걸 원했다. 타이틀에서 시선을 확 끌어야 한다고 생각했다. 배나사 웹사이트 이후 브러쉬 활용은 늘어만 갔고, 타이틀의 미려한 효과를 위해 한 시간 동안 브러쉬를 칠했다 지웠다를 반복했다. 그 결과물은 이렇게 나왔고, 일단 나는 어느 정도는 만족하는 편이다.

프로젝트명 - mindFULL.rhapsodizes"
포맷 - 웹/HTML+CSS/티스토리용 스킨
퍼블리싱 - we rhapsodize 전용 / 배포 안함

첫느낌

1. 예쁘다
2. 예쁘다.
3. 깔끔하다.
4. 그런게 결국 메뉴구성은 텍스트큐브 1.7이랑 비슷하네

5. 근데 처음 보는 사람한텐 좀 어렵겠다. 관리자 메뉴는 (1.7과 마찬가지로) 참 잘 정리되어있다. 하지만 문제는 단어 선택에 있는 것 같다.

'싸이에 익숙한 라이트 유저'가 메뉴를 보면 '커뮤니케이션?' '네트워크?' 할 거다. 커뮤니케이션과 댓글/트랙백이라는 단어가 과연 쉽게 연관될까. 소통이라는 말을 써도 마찬가지다.

네트워크는 또 뭔가. 더 모르겠다. 뭔가 했다. 링크인가 싶었다. 관심블로그? 어머나....

결국 문제는 메뉴가 잘 구조화 되어있으나 그 메뉴 안에 무엇이 있는지 알기 위해서는 꼭 직접 부딪혀야한다. 이런 점에서 어려움을 느끼는 사람, 정말 많다. 결론, 어렵다.

텍스트큐브닷컴 블로그 개설을 축하합니다.

텍스트큐브닷컴 서비스에 가입하신 것을 환영합니다.
회원님은 현재 텍스트큐브닷컴 클로즈드 베타 서비스 사용자입니다.

이 포스트는 텍스트큐브닷컴 서비스에서 블로그를 만든 이후 처음 보여지는 안내 포스트입니다. 내용을 다 읽으신 이후에는 삭제하셔도 됩니다.
텍스트큐브의 멋진 기능들을 살짝 소개해 드립니다.


보다 쉽고 편리하게 글을 작성할 수 있습니다.

1. 글쓰기 메뉴가 깔끔하게 정리 되었습니다.
2. 멀티미디어 첨부위자드를 도입했습니다.
3. 글쓰기 도중에 자료를 검색하여 본문에 삽입할 수 있게 되었습니다.*
(* 외부자료 검색하여 붙여넣기는 추후지원)


블로그끼리 서로 연결됩니다.

관심있는 텍스트큐브닷컴 블로그를 "관심블로그"로 등록하세요.
내가 어떤 블로그에 관심 있는지를 나타낼 수 있으며, 관심 블로그의 새 글을 알리미로 구독 할 수 있습니다.


개인화된 정보가 추천됩니다.

1. 회원님의 글을 바탕으로, 회원님을 잘 나타낼 수 있는 태그(ExperTag)가 추천 됩니다.
2. 글쓰기의 재료를 위한 포스트가 추천됩니다.


블로그에 첫 글을 남겨 보세요.

어느페이지에 있더라도 블로그 오른쪽 상단의 "글쓰기" 버튼을 클릭하면 바로 글쓰기가 가능합니다.

지금 바로 글을 하나 써보시는 건 어떨까요?



텍스트큐브닷컴은 현재 비공개 베타서비스중입니다.
사용중 발견하신 버그나 개선점은 관리자 페이지 상단에 위치한 의견제안 링크를 통해서 언제든지 가능합니다.

텍스트큐브를 통해 멋진 블로그를 만들어 보세요.