다함께 웹인사이드

팝업, 사람들이 가장 싫어하는 광고기술

2010-10-15T16:44:00.000+09:00

웹사이트에서의 광고, 가장눈에 띄는 것이 효과적일까?

흔히들 눈에 가장 잘 띄는 것이 가장 효과적인 광고라고 생각합니다. 하지만 항상 그렇지는 않습니다. 특히 웹사이트는 다릅니다.

"(웹사이트)사용자들은 웹사이트를 (읽는 것이 아니라) 단지 본다"

위 말은 어느 웹사이트 디자인을 분석한 책에서 봤던 내용입니다. 한 눈에 내용을 파악할 수 있는 구성과 제목 선정, 그림이나 삽화 활용 등이 중요한 거겠죠.

요약하자면, 팝업은 사람들이 가장 싫어하는 광고기술입니다.

팝업, 사람들이 가장 싫어하는 광고기술

이런 웹사이트의 특성은 사람들은 수 년간 웹사이트를 사용하면서 만들어진 습관에 의존한다는 것으로부터 기인합니다. 그 중 하나가 팝업에 대한 사람들의 습관입니다.

닐슨 노먼 그룹의 User Experience2004 컨퍼런스에서 야후의 플랫폼 연구 매니저인 존 보이드와 이베이의 사용자 연구 담당자인 크리스천 로러 이 두 사람은 사용자들이 온라인 광고를 인식하는 방법에 대한 대규모 연구 결과를 발표했다. 온라인 광고의 디자인 요소 중 가장 사람들이 부정적으로 뽑은 것이 바로 "창 위에 표시되는 팝업"이었다. 설문에 참가한 사용자의 95%가 부정적이라고 응답했다. 현재 한국에서 다시 조사한다면 더 부정적인 결과를 얻을 것이다. 제이콥 닐슨 "팝업창은 사용성의 심각한 위배"

위 내용은 이콥 닐슨의 <웹 사용성 중심의 웹 사이트 제작론>이라는 책을 인용한 것입니다. 수년 간 웹사이트에서 겪었던 '불필요한 팝업'때문에 사람들은 자연스럽게 팝업이 보이면 '닫기'버튼을 찾습니다.

다함께 홈페이지는 중요한 행사를 앞두고 홈페이지 첫화면에 팝업을 띄우곤 했습니다. 앞으로는 최대한 팝업을 사용하지 않는 것이 좋겠다는 판단입니다. 이번 공개토론회 "북한의 3대 권력 세습, 이것이 사회주의인가"를 위한 광고는 다음과 같이 넣었습니다.

위 그림처럼 배너형식으로 아코디언과 상단메뉴 사이에 광고를 넣었습니다.

광고처럼 보이지 않게

지금 드는 생각은 텍스트 부분은 이미지로 처리하지 않았다면 더 좋았을 것 같다는 생각입니다. 왜냐하면 사용자들은 기업광고처럼 보이는 것들도 무시하는 경향이 있기 때문입니다. 눈에 띄는 이미지 배너로 제작했다 하더라도 이것이 광고배너처럼 보이는 것은 사용성을 낮추는 효과를 내기도 합니다. 따라서 홈페이지에서 자주 사용하는 기본적인 레이아웃에 광고내용을 삽입하여 디자인하는 것이 더 나을 것입니다. 앞으로는 이 점도 적극 반영하여 배너제작을 해야겠습니다.^^

맑시즘 10주년, 올해도 어김없이 진보포럼 맑시즘2010이 개최됩니다.

2010-05-10T17:16:00.000+09:00

레프트21의 주요기사보기 안내

2010-04-13T14:42:00.000+09:00

다함께 홈페이지는 웹마스터 보다는 관심을 가져주시는 방문자님들이 만들어가는것 같아요. 특히 아이짱님의 꼼꼼한 지적 덕분에 오류 투성이었던 홈페이지를 바로잡아가고 있습니다. 아이짱님이 말씀해주신 오류는 레프트21의 주요기사를 보는 부분이었습니다. 이 오류들을 수정하면서 수정한 내용과 함께 주요기사보기 기능에 대해 글을 써야겠다는 생각이 들었습니다.

① 집중이슈 목록

이 목록을 클릭하면 해당 집중이슈를 모아보는 페이지가 새창으로 열립니다. 그런데 어떤 목록을 클릭해도 모두 같은 페이지가 열리는 오류가 있었습니다. 이 화면은 레프트21의 첫화면을 그대로 파싱(읽어와서 분석)해서 가져오는 것입니다. 파싱을 하는 기능을 파서라고하는데 이 파서에 문제가 생겼었습니다. 이 오류를 수정했습니다.

② 가장 큰 크기의 제목은 메인기사입니다.

메인기사는 주요기사 중 하나로 정해집니다. 대부분의 경우 주요기사 목록의 가장 첫번째와 같습니다. 본문의 일부를 노출시키는 기능을 추가할 예정입니다. 제목만 있으니 썰렁하고 주요기사의 첫번째 목록과 일치하기 때문에 메인기사는 썸네일이나 본문의 일부를 노출하는 것이 적절하리라 생각되요. 레프트21의 첫화면 개편이 진행중이라고 하니 그 작업과 맞추어서 업무재휴를 하도록 하겠습니다.

③ 주요기사 슬라이드

예전에는 주요기사 목록만 쭉 나열하는 방식이었습니다. 이것을 슬라이드로 넘기도록 한 것이죠. 주요기사 순서는 다함께에서 임의로 수정하지 않고, 레프트21의 편집을 그대로 따르고 있습니다. 레프트21의 편집은 주요기사를 기사가 생성된 시간 순서대로 편집하지 않습니다. 이 때문에 새로나온 기사가 첫번째에 나오는 것은 아니겠죠.

최신을 가장 위에 배치하는 방식은 장단점이 있다고 생각됩니다. 어떤 글이 최신 글인지 바로 파악할 수 있는 장점이 있는 반면 "어떤 기사를 잘보이게 배치할 것인가?"라는 편집자의 의도를 반영하기는 어려워집니다. 이 때문에 레프트21의홈페이지에서 "최신 온라인 기사보기"라는 기능을 별도로 제공하여 최근순으로 기사를 볼 수 있도록 한 것이겠죠?(물론 온라인기사만 해당됩니다)

다시한 번 아이짱님의 관심에 감사드리면서 앞으로도 좋은 조언 계속 부탁드리겠습니다.

성명, 레프트21주요기사, 포럼의 재구성

2010-04-02T22:47:00.000+09:00

대부분의 경우 디자인은 기능과 긴밀합니다. 다함께 홈페이지의 첫화면의 주요한 기능이 "성명과 주요기사와 포럼의 정보를 보여주기"라면 이 세가지를 한눈에 쉽게 볼 수 있도록 해줄 수 있는 디자인이 필요하겠죠. 현재 개편중인 다함께 홈페이지는 이런 점을 적극 반영하려는 노력이 돋보이는 디자인입니다. "핵심기능 선택하기"라는 글에서 잠시 소개드린것인데요. 아래와 그림을 보시죠.

미니 아코디언

미니 아코디언을 통해 성명,레프트21,포럼을 어떻게 재구성했는지 바로 확인하실 수 있습니다. 이전보다 더 작은 화면에 세 개의 요소를 배치했지만, 아코디언을 펼치는 순간 더 큰 화면으로 각각의 내용을 볼 수 있다는 사실을 알게됩니다.

홈페이지 방문자는 가만히 스크롤만 하다가 어지러운 화면을 견디지못해 나갈 수 있었습니다. 이제는 방문자가 아코디언을 연주하는 작은 재미?를 느끼실 수도 있습니다. 그리고 더 동적인 화면이 되었지만 어지럼증은 줄어들었을 텝니다.

오래방문하지 않더라도 일정이나, 신문 주요기사와 포럼 등을 확인하기 위해 자주 방문하는 웹페이지가 되었으면 좋겠다는 것이 저의 바램입니다.

이윤보다 사람을,
경쟁보다 연대를,
전쟁이 아니라 평화를,
차별이 아니라 존중을
반전 ·반신자유주의
노동자 투쟁

삼성이 박지연 씨를 죽였고, 정부는 살인을 방조했다

노동자투쟁
낙태논쟁
대학교육
그리스 총파업
민주노동당 탄압
대학교육

북한 관련설 흘리지 말고 진정한 원인을 신속히 밝혀라

세계화의 신화
위기의 시대
마르크스주의
노동자 투쟁
언론과 대중의식

세계화와 '탈산업화'-신화와 현실

새로 개편되는 홈페이지에 대해 의견을 많이 주시면 적극 고민하고자 하는 것이 다함께 웹마스터가 가장 중요시하는 가치 중에 하나입니다. 블로그도 많이 방문해주세요^^

노동자투쟁 특별페이지 개설

2010-03-31T12:04:00.000+09:00

계급의 귀환과 특별페이지

경제 위기 속에서 사람들이 느끼기엔 “경제적 공포와 고통이 더 시급하기 때문”에 “경제 위기 고통전가에 맞서는 것이 우리의 최대 과제”라는 것이다. 최일붕은 노동자 계급 투쟁이 중요하다고 강조하며 이를 “계급의 귀환”이라고 표현했다. 경제 위기 시기에 노동자 투쟁 지원을 효과적으로 건설하기

2010년은 작년에 이어 노동자들의 투쟁이 계속 벌어질 것입니다. 노동자들이 경제위기와 고통전가에 맞서서 언제나 저항에 나서지는 않을 수 있으나 한국의 경우 촛불항쟁의 경험이 노동자들에게 자신감을 준 측면이 있기 때문에 저항에 나설 수 있습니다. 이미 크고 작은 투쟁들이 전국에서 저항을 시작하고 있습니다. 얼마전 한진중공업의 투쟁, 금호타이어도 투쟁을 시작했고, 발레오만도나 현대자동차(전주,울산)를 시작으로 비정규직투쟁도 확대되고 있습니다.

23일부터 노동자투쟁 특별페이지를 개설하여 운영하고 있습니다. 앞으로도 계속 유지할 텐데요. 이곳에서 노동자들의 투쟁과 관련된 기사 및 성명, 자료, 일정들을 한눈에 볼 수 있도록 했습니다. 한국 노동자들의 성공적인 귀환을 위해 보템이 될 수 있다면 좋겠습니다. 아래 그림을 통해 특별페이지를 소개하도록 할게요^^

상단메뉴 개선했습니다.

2010-03-15T11:09:00.000+09:00

기존의 플레시였던 상단메뉴를 수정했습니다. 다함께의 상징적인 색인 붉은 색은 살리되 톤을 어둡게하고 그라데이션처리를 하여 고급스럽게 표현해 보았습니다.

저는 모서리가 둥근 형태는 지향하지 않지만 기존의 디자인에 크게 벗어나지 않는 곡선을 이번에도 사용했습니다. 아무래도 대부분 둥근 모서리가 좀 더 보기 편하다는 의견이 많아서요.ㅋ

로고도 바뀌었습니다. 로고 상단의 슬로건이 "노동자 연대―" 로 수정되었고, 로고 하단에는 그림자를 넣었습니다. 슬로건이 바뀐지는 몇 주 되었는데, 홈페이지에서는 반영이 늦어졌네요^^

메뉴에 마우스를 올리면 하위메뉴가 슬라이드로 펼쳐집니다. 기존의 플레시 메뉴때처럼 부드럽게 보일 수 있도록 최대한 노력했습니다. 그래도 부드러운 펼침은 플레시가 약간 더 나은 것 같습니다;; 장점은 플레시 플레이어가 웹 브라우져에 설치되어있지 않아도 메뉴바를 사용하실 수 있다는 점입니다. 왜냐하면 플레시로 만든 것이 아니라 '자바스크립트'라는 언어로 만들었기 때문인데, 대부분 웹브라우져는 '자바스크립트'언어를 해석하는 기능이 장착되어있습니다. (물론 때에 따라서 고급 사용자가 자바스크립트 해석기를 꺼두는 경우도 있는데, 이때에도 사용할 수 있도록 했습니다. 디자인은 좀 궁색해지기는 합니다만...; )

아래 그림과 같습니다.

다함께 상단메뉴 메뉴에 마우스를 올리면 하위메뉴가 펼쳐집니다.

자바스크립트를 강제로 사용하지 않도록 했을 경우 하위메뉴가 아래로 펼쳐진 상태로 시작합니다.

[초보 웹기획] 핵심기능 선택하기

2010-02-10T21:04:00.000+09:00

다함께 홈페이지는 현재 개편중입니다. 개편의 과정과 그 속에 녹아 있는 기획 아이템들을 소개하는 글들을 (개편이 완료될 때까지) 쓸 예정입니다. "웹에서 이미지 활용하기"와 "홈페이지 상단메뉴 만들기"에 이어 세번 째 내용이네요. 당부드리고 싶은 말은 앞으로 소개되는 디자인은 진행중이기 때문에 일부 수정될 수 있습니다. 다만, 기획의 취지와 방향에 대해서 말씀드리고자 합니다.

다함께 홈페이지의 메인페이지에서 핵심적 기능은 '다함께 성명'과 제휴 언론사인 '<레프트21>'그리고 '포럼'이 세가지를 하나의 화면속에 배치하는 것일 것입니다. 세가지를 한 화면에 배치해야 하기 때문에 한눈에 들어오도록 구성해야합니다. 긴 설명보다는 그림으로 보여드리는 것이 빠를 것 같습니다.

상단의 그림은 성명서란에 마우스를 올렸을 때, 가운데 그림은 <레프트21>란에 마우스를 올렸을 때, 하단의 그림은 포럼란에 마우스를 올렸을 때 화면입니다. 즉, 마우스를 올리면 펼쳐지고 나머지는 접히게됩니다. 여러분은 위 세개의 그림을 마우스로 선택하여 보게되는 것이죠. 당연히 개편이 완료되지 않았기 때문에 위 화면은 지금 적용된 화면과는 다릅니다.

접혔을 때

아쉬운 점은 위와같은 구성을 적용하려면 javascript라는 언어로 작성해야하는데, javascript를 사용하지 않는 소수는 펼치거나 접을 수 있는 기능을 사용하지 못하게 됩니다. 이 점을 보완하기 위해 펼쳐지기 전에는 내용을 압축적으로 표현하여 링크를 걸도록 할 예정입니다. 오른쪽의 그림처럼 말이죠.

참고한 글 "핵심기능을 선택하라"

글자 크기 확대 축소 버튼 장착

2010-02-02T20:34:00.000+09:00

다함께 홈페이지는 글이 매우 많지는 않지만 기본적으로 성명과 문서 등의 자료를 볼 때 조금이라도 편하게 볼 수 있도록 고민하고 있습니다. 기본적으로 글 상세보기에서는 제목은 17pt 내용은 11pt로 설정되어있습니다. 다른 홈페이지의 평균적인 폰트사이즈보다 조금 크죠.

더 작게 혹은 더 크게 보고 싶을 경우가 있으실 겁니다. 이 때 아래의 버튼을 이용해 보세요! 폰트 사이즈를 조절하실 수 있습니다. 제목의 경우 최대 23pt, 최소 11pt까지 조절가능하구요, 내용은 최대 17pt, 최소 5pt까지 조절 가능합니다.

확대 축소 버튼

글자 크기조절은 다른 페이지에서는 적용하지 않았습니다. 주로 텍스트로만 이루어진 '글 보기'화면에서만 사용할 수 있습니다. 이미지가 많거나 텍스트가 적은 페이지에서는 오히려 화면이 뒤틀리거나 불필요한 기능이라고 생각했기 때문입니다.

메인페이지의 <레프트21>주요기사 자동으로 받아오기

2010-02-02T16:54:00.000+09:00

수공업적 방식

기존까지는 수공업적 방식으로 <레프트21>의 주요기사를 다함께 홈페이지에 반영했습니다. <레프트21>주요기사가 업데이트 될 때마다 다함께의 메인페이지를 일일이 수정해왔습니다. 이 때문에 제가 바쁘면 새로운 기사가 늦게 반영되는 일이 잦았고, 가끔 오타도 발생하게되었죠. 수공업적 방식은 불가피할 경우가 아니라면 비효율을 낳게되죠. 이 수공업적 작업을 자동화 했습니다.

이 문제를 해결하기 위해 <레프트21>의 홈페이지의 메인페이지를 읽어서 주요기사만 쏙 빼와서 자동으로 다함께 홈페이지에 반영하는 프로그램을 만들었(다기 보다는 누가 만들어놓은 것을 잘 활용했)답니다.

레프트21 주요기사 목록 박스

보시기에 크게 달라진게 없죠. 이것을 예전엔 직접 타이핑해서 넣었다면 이젠 <레프트21>홈페이지가 업데이트 되면 자동으로 반영되니, 제가 타이핑하다가 오타가 날 일도 없고, 늦게 반영되는 일도 없을 겁니다.^^

[초보웹기획]단순하고 쉬운 구성 - 캠페인자료실 개선

2010-01-26T17:04:00.000+09:00

단순하고 쉬운 구성

요즈음 다함께 홈페이지 개선의 중요한 방향은 '단순하고 쉬운 구성 으로 만들자' 입니다. 그에 맞게 메인페이지의 구성과 전체 페이지의 구성을 변경할 기획을 하고 있습니다. 그에 앞서 '단순하고 쉬운 구성'이라는 취지에 맞게 캠페인 자료실 페이지를 개선했습니다.

단순하고 쉬운 구성이라는 개념이 명확하지 않을 수 있네요. 캠페인 자료실의 경우 새로운 구성의 목적은 바로 사용자들의 편의성이겠죠. 자료에 접근할 때 자료가 어지럽게 나열되어 있다면 찾아보기 짜증날 수 있다고 생각합니다. 특히 캠페인 자료실은 5개의 분류가 각각 5개의 리스트를 가지고 나열되어있습니다. 안그래도 업데이트가 수시로 되지 않는 자료실이므로 굳이 많은 자료를 처음부터 나열할 필요가 없다고 느껴졌고, 손쉽게 자신이 찾고자 하는 카테고리만 볼 수 있도록 했습니다.(물론 카테고리를 한 번 클릭해야겠지요)우선 기존의 캠페인 자료실을 보시죠.

캠페인 자료실 개선

기존 캠페인 자료실-위와같은 테이블이 5개가 나열되어 있었습니다.

이를 다음과 같이 개선했습니다.

개선된 캠페인 자료실

훨신 간단하죠? 물론 캠페인자료실에 막 들어왔을 때 아무런 자료를 접할 수 없죠. 한 번 이상 클릭을 더 하셔야한다는 단점이 있습니다. 대신 원하는 카테고리만 펼쳐서 보실 수가 있습니다. 모든 카테고리를 한번에 보실 수 있도록 '모두 열기'버튼도 달았습니다. 여러 카테고리를 열었다가 한꺼번에 닫으실 때도 '모두 닫기'버튼을 이용하면 편리합니다. 검색버튼을 포함하여 버튼들의 디자인을 이런식으로 모두 교체할 예정입니다.

볼 내용을 많이 제공하지 못한 점은 아쉽지만 이렇게 개선된 구성을 만들고 나니 스스로 만족스럽네요.ㅎ 심플한 구성을 위한 다함께 홈페이지의 개선을 계속 됩니다. 지켜봐주시고 의견도 많이 달아주세요^^

[초보 웹기획] 홈페이지 상단메뉴 만들기

2010-01-06T15:26:00.000+09:00

다함께 홈페이지는 현재 개편중입니다. 개편의 과정과 그 속에 녹아 있는 기획 아이템들을 소개하는 글들을 (개편이 완료될 때까지) 쓸 예정입니다. "웹에서 이미지 활용하기"에 이어 두번 째 내용이네요. 당부드리고 싶은 말은 앞으로 소개되는 디자인은 진행중이기 때문에 일부 수정될 수 있습니다. 다만, 기획의 취지와 방향에 대해서 말씀드리고자 합니다.

메뉴를 플래시와 이미지로 대체하지 말기

지금 다함께는 메뉴가 통째로 플래시로 만들어져 있습니다. 만들 당시에는 플레시로 메뉴를 대체하거나 전체 메인페이지를 대체하는 것이 대세였습니다. 그리고 플래시는 뛰어난 웹디자인 도구임에 틀림없습니다. 때문에 웹 컨텐츠로써 병행하여 사용한다면 매우 유용합니다.(더 자세한 내용) 그러나 내용의 일부나 전체를 대체하는 방식으로 사용하는 것은 바람직하지 않습니다. 바로 접근성 때문입니다. 열악한 환경의 유저나 검색 로봇, 그리고 개발자마저도 접근성이 용이하다고 볼 수 없기 때문입니다. 일부로서만 존재하여 플래시를 실행하지 못하는 환경에서도 모든 내용에 접근할 수 있도록 사용해야 합니다.

상단메뉴- 펼쳤거나, 자바스크립을사용하지 않을 때

상단메뉴 - 기본적으로 하위메뉴가 숨어있다.

한 번더 당부드리자면 위 디지인은 임의적인 것이므로 변경 될 수 있습니다. 더 좋은 디자인으로 변화할 수 있습니다. 위 메뉴의 취지는 다음과 같습니다.

두 가지 경우에 따라서 달리보이죠? (자바스크립트를 이용하여)하위메뉴는 일단 보이지 않게합니다.(그림 아래) 메뉴를 클릭하면 슬라이드로 메뉴가 펼쳐집니다. 만약 자바스크립을 사용하지 않는 사용자의 경우 펼쳐져 있는 상태로 보이게 됩니다.

겨울방학 대학 마르크스주의 포럼

2010-01-05T17:13:00.000+09:00

목록으로 돌아가기 오류수정

2010-01-05T17:09:00.000+09:00

12월 초 아프로켄님이 신고해준 오류였습니다. 12월 17일경에 해결했는데, 그 내용을 이제야 적게됩니다. 오류내용은 예를 들면 다함께 메인페이지에서 "날치기로 노동자의 뒤통수를 치 추미애를 규탄한다"라는 성명을 클릭했다고 합시다. 그러면 해당 성명을 보여주는 화면으로 가겠죠. 여기서 목록보기를 누르면 목록화면으로 가지 않고, 다시 메인페이지로 가게됩니다. 쉽게 설명하면 다음과 같지요.

메인페이지, 성명클릭 -> 성명자세히보기 페이지, 목록버튼클릭 -> 메인페이지

왜냐하면 목록버튼이 어떤 페이지로부터 왔는지에 관계없이 이전페이지로 다시 가도록 되어있었기 때문입니다. 이메커니즘을 두 가지 경우로 나누어 수정해 보았습니다.

1. 메인페이지, 성명클릭 -> 성명자세히보기 페이지, 목록버튼 클릭 -> 성명 목록 첫 페이지
2. 성명 목록 x페이지, 성명클릭 -> 성명자세히보기 페이지, 목록버튼 클릭 -> 성명 목록 x페이지

이제 어떤 곳으로부터 성명페이지로 이동했다고 하더라도 목록을 눌렀을 경우 제대로 된 목록페이지로 가게됩니다.

[초보 웹기획] 웹에서 이미지 활용하기

2009-12-17T23:46:00.000+09:00

다함께 홈페이지는 현재 개편중입니다. 개편의 과정과 그 속에 녹아 있는 기획 아이템들을 소개하는 글들을 (개편이 완료될 때까지) 쓸 예정입니다. 가장 먼저 발표하는 내용은 "웹에서 이미지 활용하기"입니다.

최근 웹상에서 이미지를 사용할 때 중요해진 요소가 '접근성'과 '검색엔진 최적화'이다. 접근성의 경우 가장 최악의 조건에서 웹에 접근한다는 것을 가정하여 웹페이지를 제작해야 한다는 것을 말한다. 검색엔진 최적화는 검색엔진 로봇이 웹사이트에 접근했을 때 문제없이 페이지의 내용을 스크롤 할 수 있도록 제작해야 한다는 것을 말한다. 이 관점에서 웹사이트를 기획할 때 이미지를 어떻게 사용해야 하는 지에 대해서 이야기해보고자 한다.

'이미지 활용'에 대한 더 자세한 내용은 다음의 블로그를 참고하기 바란다.

빨간장미 푸른바람의 웹기획 이야기

이미지를 "적절히" 활용할 줄 알아야.

기본적으로 이미지는 웹접근성과 검색엔진의 접근을 방해하는 요소로 작용하지 않을 때 사용해야 할 것이다. 그러나 검색에 잡혀야할 중요한 내용은 아니지만 사용자에게 복잡한 절차를 요구하는 페이지라면, 편리한 인터페이스를 위해 이미지를 적극사용하는 것은 좋은 방법이다. 다함께 후원페이지를 개편중인데, 이 관점을 적용해보았다.

다함께 후원페이지 시안

후원하는 방법이 다양하기 때문에 누구나 쉽게 다양한 방법으로 후원할 수 있도록 안내하는 이미지이다. 아이콘으로 한눈에 알아볼 수 있도록 이미지를 함께 사용하면 위와같이 보기도 좋고 좋은 인터페이스를 만들 수 있다. 단, 각 후원의 설명은 텍스트로 처리하여 시각적으로 웹에 접근하기 어려울 경우를 대비해 텍스트로된 설명도 함께 넣는다면 금상첨화이다.

다함께가 발행하는 글을 RSS로 받아보실 수 있습니다.

2009-12-10T09:33:00.000+09:00

다함께 홈페이지 rss 구독 버튼

다함께가 발행하는 글은 여러가지 있지만 주되게 발행하는 것이 성명/입장과 자료실입니다. 자료실에 해당하는 글은 크게 문서/사진/캠페인 이렇게 세 가지로 분류되죠. 이 글들을 rss피드로 구독할 수 있도록 했습니다. 위 그림의 버튼을 누르신 후 자신의 구독기에 추가하시면 됩니다.

참, 포럼 홈페이지도 rss피드를 제공하고 있답니다.

포럼홈페이지 rss구독 버튼

RSS 구독이 뭐냐굽쇼? 아래 링크를 참고하세요

RSS란 무엇이며 어떻게 사용하는 것일까? - <레프트21>웹마스터 블로그

자신의 블로그에 다함께 RSS구독을 홍보하실 수도 있습니다. 아래 그림을 긁어서 붙이시면 됩니다.

다음은 블로그가 아닌 자신의 홈페이지에 RSS구독 서비스를 만들고자 하는 분들을 위한 설명입니다. 펼쳐서 보시길

포럼슬라이드 작은개선 - 더욱 보기 편해진 포럼 정보

2009-12-04T20:53:00.000+09:00

아래 그림은 기존의 포럼 슬라이드 화면입니다. 제가 나름 만족스럽게 개선했다고 생각했던 슬라이드 인데요. 가만보니 우리 포럼은 지역에서 열리는 사회포럼과 대학에서 열리는 맑스주의 포럼 두가지를 열고 있는데, 슬라이드에는 그 두개의 분류가 표시되지 않고있었습니다. 그리고 제목은 훤히 잘 보이지만 연사,일시,장소는 눈에 잘 안들어오더군요. 그래서 몇가지 개선을 했습니다.

기존 포럼슬라이드 화면

1. 포럼의 대분류 와 소분류 표시
- 예를 들면 지역포럼의 경우 "**** 사회포럼", 대학의 경우 "지역이름 ― 대학맑스주의 포럼"
- 대분류는 지역 사회 포럼/대학맑스주의 포럼 두가지구요. 소분류는 대학에만 적용되는데 지역이름이 소분류가 됩니다.

2. 연사이름과 연사소개를 '들여쓰기'

이제 아래 그림과 같이 보이게 됩니다. 조금이라도 포럼을 쉽고 편하게 보실 수 있게 되시길 바랍니다^^

개선된 포럼슬라이드 화면

게시판 가독성을 위한 조치

2009-12-01T02:47:00.000+09:00

기존의 문서자료실 첫화면

기존의 문서자료실의 첫화면입니다. 테이블의 열 간격이 좁고 높이도 제각기입니다. 성명서/입장의 첫화면도 이와 같은 형태였습니다. 여느 단체 홈페이지도 마찬가지겠지만, 저희 홈페이지도 게시판 기능이 기본인데 이 핵심기능에 너무 소홀했었다는 생각이 듭니다. 그래서 다음과 같이 바꾸어보았습니다.

1. 열간의 구분이 쉽도록 짝수 열에 배경색을 넣었구요.

2, 높이도 50px로 통일했습니다.

3. 제목의 크기를 키우고 마우스를 올렸을 때 진하게 표시되도록 했습니다.

4. 날짜는 가운데 정렬로 수정했습니다.

좀 더 보기가 편하시죠?^^

얼마전 "기능만능주의를 피하라"라는 글을 통해 웹기획시에 핵심기능을 중심으로 우선순위를 정해야한다는 말을 했습니다. 앞으로 게시판 기능 보완에 대한 기획을 해야할 것 같습니다. 좋은 의견있음 댓글이나 홈페이지 오류신고에 의견을 남겨주세요~.

나눔고딕을 제한적으로 사용하기

2009-12-01T02:46:00.000+09:00

얼마전 다함께 홈페이지의 기본글꼴을 나눔고딕으로 변경했습니다.(관련글 나눔고딕을 기본글꼴로!) 그러나 아래 그림처럼 글자가 작고 굵은 경우 오히려 가독성이 떨어지는 것을 발견했습니다. 특히 자간이 좁을 때는 더욱 그러합니다. 큰 화면으로 보시는 분들은 괜찮지만 작은 화면에 많은 내용을 봐야할 경우 오히려 눈에 피로를 줄 수가 있겠더군요.

이를 고려해서 나눔 고딕을 기본으로 하는 경우는 글자 크기가 큰 제목이나 15px이상의 경우에만 한정하도록 했습니다. 모든 텍스트를 나눔고딕으로 보시려면 브라우져의 기본 글꼴을 나눔고딕으로 설정하시기 바랍니다.

나눔 고딕을 기본글꼴로!

2009-11-11T05:28:00.000+09:00

대부분의 사용자의 운영체제는 윈도우계열이지요. 지금은 윈도우XP가 가장 많이 사용되고 있는 걸로 압니다. 한국의 유저들이 가장 많이 사용하고 있음에도, 한글 폰트에 대한 배려는 매우 부족해 보입니다. 이를 보안하기 위해 최신의 윈도우는 '맑은 고딕'이라는 폰트를 제공하고 있습니다. 주로 사용되는 '굴림'이나 '돋움'보다는 훨 보기 편한 글꼴입니다. 물론 문서가 아닌 웹사이트에서 말이죠.

그런데 '맑은 고딕'은 기존의 XP사용자들에게는 글꼴을 직접 다운받아 설치하더라도 '최적화'작업을 하지 않으면 흐릿하게 보이는 단점이 있습니다. 오히려 보기가 매우 불편하죠.

얼마전 다함께 홈페이지의 기본글꼴로 '맑은 고딕'을 설정하는 실수를 했습니다. 다행히 단추님이 오류신고 해주신 덕분에 곧바로 바꾸었습니다.

나눔글꼴로 본 성명서/입장

네이버에서 2008년에 배포한 '나눔 고딕'을 기본 글꼴로 설정해보았습니다. 이는 다운받아 실행하면 자동설치되고 웹브라우져만 종료했다 다시 띄우면 바로 적용됩니다. '나눔 글꼴'을 설치하지 않더라도 크게 불편없도록 했으니 염려마세요^^ 디자인적으로 좀 더 우수하면서도 보기도 더 편한 글꼴로 다함께 사이트를 보시려면 아래의 링크를 통해 글꼴을 설치해보세요~

나눔글꼴 설치하기

마지막으로 바램이 있다면 차세대의 윈도우에는 더 다양한 한글 폰트가 기본으로 제공되었으면 합니다. 뽀샵으로 이미지를 만들지 않아도 더 나은 웹 디자인가능해 질 겁니다. 이는 개발자 뿐만 아니라 방문자들에게도 이로운 일이지요^^

활동보고/사진자료 - 슬라이드로 개선!(JQuery)

2009-10-28T15:41:00.000+09:00

그림1 자바스크립트를 이용한 슬라이드

요즈음 같이 기자회견도 많고 여러 활동이 많아 사진자료실의 내용들도 금방금방 업뎃이 되고 있습니다. 최신의 사진자료 9개까지 슬라이드로 볼 수 있도록 했습니다. 센스있으신 분들은 금방 눈치 채셨겠지만, 이 버튼

을 눌러 슬라이드 기능을 이용하실 수 있습니다. 홈페이지에 접근했을 때, 방문한지 몇일 되었다면 활동사진리스트 페이지로 이동하지 않더라고 최근 몇일간의 사진들을 보실 수가 있겠죠? 개발자의 입장에서는 방문자가 홈페이지에 방문했을 때 머무는 시간을 좀더 늘리게 하는 효과를 기대할 수가 있습니다.

모든사용자를 위한 배려

이 슬라이드는 자바스크립트라는 언어를 통해 만들었습니다.그렇다면 자바스크립을 꺼두었거나 사용하기 싫어하시는 분들은요? 그래서 자바스크립트를 사용하던 사용하지 않던 '활동보고/사진자료'란을 이용할 수 있도록 신경을 썼습니다. 당연히도 익스플로러6, 익스플로러7, 익스플로러8, 파이어폭스에서도 호환되도록 했습니다.(다른 브라우져는 시험해보지는 않았습니다. 누가 해보심..얘기해주삼.)

그림2 자바스크립트를 꺼두었을 때 활동보고/사진자료

위 그림2는 자바스크립트를 껐을 때의 화면입니다. 그림1과의 차이점은 슬라이드를 넘기는 화살표가 없는 거죠. 그 때문에 9개 중 가장 최신의 3개만 볼 수 있겠죠? 제가 예상못한 버그가 있다면 서슴없이 댓글을 남겨주세요^^

혹시 원치않게 자신의 브라우져가 자바스크립트 비활성화되어 있는데 다시 자바스크립트를 활성화하고 싶다면 아래의 글을 펼쳐서 참고하십시요

여기부터는 기술적인 부분입니다. 관심있으시다면 펼쳐서 보시길

제가 중요하게 생각한 알고리즘은 재사용성입니다. <ul>태그의 총 개수만 알면 알아서 계속 로테이션방식으로 슬라이드가 이루어 지도록 한거죠. 슬라이드 시킬 단위를 <ul>로 감싸는 작업만 해준다면 다른 슬라이드도 아래의 코드로 적용이 가능합니다.

마르크스21, 소책자 페이지 개선

2009-10-23T12:14:00.000+09:00

사이드 바

다함께는 간행물로서 소책자와 이론지를 펴냅니다. 소책자는 수십권의 책이 나와있고, 이론지는 <마르크스21>이라는 이름으로 정기간행물로 발행을 하고 있습니다. 현재까지 3호까지 나와있죠. 그런데 이론지가 소책자로 분류되어있었습니다. 이를 분리하는 작업을 했습니다.

왼쪽의 그림이 간행물 페이지로 이동했을 때의 사이드 메뉴입니다. 소책자와 마르크스21로 분리한 모습입니다. 소책자는 분류별 목록을 나열하고 있고, 이론지는 마르크스21 1종이기 때문에 각 호를 나열했습니다.

두번째 개선은 소책자의 분류개선입니다. 여성관련 소책자가 '전쟁/제국주의'라는 분류에 잘못 등록되어있었습니다. 이와 같은 잘못된 분류가 몇 개 있었구요. 삐딱이를 위한 혁명가 시리즈를 계속해서 발행하고 있는데, 따로 분류가 없는 채로 있었습니다. 지금까지 레닌과 트로츠키에 대한 삐딱이 시리즈가 나왔고, 앞으로 그람시에 대한 책자가 나올 예정입니다.(좀 기대되는 소책자입니다^^) 때문에 이 책들을 '삐딱이를 위한 혁명가 시리즈'라는 제목으로 분류를 신설해서 포함시켰답니다.
그리고 여성과 환경이 묶여서 '여성/환경'이라는 분류로 되어있었습니다. 이를 '여성'분류와 '환경'분류로 분리했습니다.

소책자 목록보기

세번째 개선은 목록을 좀 더 쉽게 한눈에 들어오도록 목록페이지의 레이아웃을 개선했습니다.

예전에는 한줄에 하나씩 나열되어 있었습니다. 그것을 한 줄에 세개씩 나열하도록 했습니다. 대신, 박스처리해서 박스안에 이미지와 제목, 연사, 소개가 한눈에 들어오도록 했죠.

앞으로도 계속 꾸준한 개선을 할 예정입니다. 다만 아쉬운건, 액티브X를 사용해야만 결재가 가능한 한국의 시스템 때문에 결제 페이지나 장바구니 기능은 Explorer에서만 가능한 점입니다. 이는 아직까지는 제가 어쩔 수 없는 부분이기도 하거든요.

꽤 다양한 주제의 소책자와 이론지에 관심 많이 가져주십시요. 더구나 이론지는 조만간 텍스트를 공개하여 웹사이트에서도 읽고 검색할 수 있도록 홈페이지를 개발중이니 기대하셔도 좋습니다. 꽤 두텁고 어려운 내용을 담고 있기 때문에 진지한 탐구를 하시려면 물론 구입하시는 편이 좋을 것입니다.^^

녹풍님의 아래 댓글을 보고 예전 소책자 목록페이지를 첨부했습니다. 분류도 엉망이고, 구성도 일관성이 없었어요. 계속 마음에 걸렸는데 이제야 수정을 하게되어 속이 시원합니다. ^^ (자세히 보시려면 클릭!!)

예전 소책자 메인페이지

모든 링크모음 보기개선

2009-10-22T20:03:00.000+09:00

개선한지는 꽤 시간이 흘렀지만 아직 눈치채지 못했거나 왜 이런개선을 했는지 궁금하실 수도 있어서 늦게나마 글을 쓰게 됩니다. 링크모음이라함은 홈페이지의 가장 하단에 보이는 링크모음을 말하는 겁니다. 아래그림처럼요.

플래쉬 매뉴가 이 링크들을 포함하고 있지만, 이렇게 한 눈에 볼 수는 없죠. 위 처럼 한눈에 볼 수 있는 링크모음들을 덩치가 큰 홈페이지들은 대부분 제공하고 있답니다. 저희 사이트는 덩치가 크진 않지만요;; 아무튼 때로는 복잡한 화면보다 하단의 링크모음이 한눈에 들어오기 때문에 이 링크를 사용하는 일이 더러 생기게 됩니다.

위와 같은 개선은 검색엔진 최적화에도 유리합니다. 이른바 '백링크'를 제공하기 때문이죠. '백링크'란 내가 방금봤던 페이지로 다시 되돌아갈 수 있는 링크입니다. 물론, 상단에 플레쉬 메뉴에서 링크를 제공하고 있습니다. 하지만 검색엔진이 우리 사이트를 살펴보러 왔을 때 플래쉬로 만들어진 링크는 잘 읽지 못합니다. 때문에 텍스트로 이루어진 링크를 모아서 하단에 배치함으로서 '백링크'가 설치된 셈이죠.
'백링크'가 없는 경우를 예를 들어 설명드리면, A페이지에서 C페이지로 가려는데, 반드시 B페이지를 거쳐서 가야된다면? 이런 경우는 적절한 '백링크'를 가지지 못한 홈페이지라고 할 수 있습니다.

제가 열심히 개선을 하고 있긴 하지만, 아이디어도 부족하고 실수도 많습니다. 이 블로그에 오셔서 오류나 개선사항을 올려주시면 제가 더욱 즐겁게 일할 수 있을 거란 상상을 합니다.^^

사회민주주의 복지국가 모델 어떻게 볼 것인가?

2009-10-19T17:03:00.000+09:00

※ 포럼을 홍보하시고 싶으시다면, 아래 내용을 참고하세요.

1. 해당 게시판에, 아래 소스를 퍼 주세요~!!^^

2. 만약 위의 방법이 안 된다면, 이 포스트에 첨부된 html파일을 드래그한 후,

복사(ctrl+C)해서 붙여(ctrl+V)주시면 됩니다.^^

포럼을 슬라이드로 보자

2009-10-09T15:46:00.000+09:00

현재 우리 홈페이지 메인에서는 향 후 1달 내의 포럼을 모두 출력하고 있습니다. 포럼의 숫자도 증가되어 메인페이지에 많게는 10개 까지 출력됩니다. 아래로 쭉 늘어뜨리면 보기에도 좋지 않고, 다른 내용들이 지나치게 아래로 내려가버립니다.

때문에 화살표를 클릭해서 현재 계획 중인 포럼들을 슬라이드 형식으로 볼 수 있도록 했습니다. 대신 방문자가 능동성을 좀더 발휘해야 겠죠. 아래는 개선된 화면입니다.

그림1 개선된 포럼노출 화면

원리는 모든 포럼을 가로로 쭉 나열 한 다음 나머지는 까만 선으로 칠해진 영역은 숨기고 가운데 밝은 부분만 화면에 노출시킵니다. 그 다음 화살표를 클릭하면 틀은 고정한 채 포럼들만 일정한 양만큼 이동시키면 포럼을 하나씩 넘겨 볼 수 있는거죠.(그림 2 참고)

그림2 슬라이드 원리

화살표를 클릭하지 않으면 방문자가 1개의 포럼만 보고 넘어갈 수 있기 때문에 이를 개선하기 위해 자동으로 슬라이드가 이동하도록 할 예정입니다. 그리고 브라우저에서 자바스크립을 꺼놓고 사용하시는 분들은 슬라이드기능을 사용할 수 없습니다. 자바스크립이 꺼져 있을 경우 포럼을 클릭하시면 포럼페이지로 이동하셔서 보시면 됩니다^^

다함께 웹인사이드

팝업, 사람들이 가장 싫어하는 광고기술

웹사이트에서의 광고, 가장눈에 띄는 것이 효과적일까?

팝업, 사람들이 가장 싫어하는 광고기술

광고처럼 보이지 않게

맑시즘 10주년, 올해도 어김없이 진보포럼 맑시즘2010이 개최됩니다.

레프트21의 주요기사보기 안내

① 집중이슈 목록

② 가장 큰 크기의 제목은 메인기사입니다.

③ 주요기사 슬라이드

성명, 레프트21주요기사, 포럼의 재구성

미니 아코디언

노동자투쟁 특별페이지 개설

계급의 귀환과 특별페이지

상단메뉴 개선했습니다.

[초보 웹기획] 핵심기능 선택하기

글자 크기 확대 축소 버튼 장착

메인페이지의 <레프트21>주요기사 자동으로 받아오기

수공업적 방식

[초보웹기획]단순하고 쉬운 구성 - 캠페인자료실 개선

단순하고 쉬운 구성

캠페인 자료실 개선

[초보 웹기획] 홈페이지 상단메뉴 만들기

메뉴를 플래시와 이미지로 대체하지 말기

겨울방학 대학 마르크스주의 포럼

목록으로 돌아가기 오류수정

[초보 웹기획] 웹에서 이미지 활용하기

이미지를 "적절히" 활용할 줄 알아야.

다함께가 발행하는 글을 RSS로 받아보실 수 있습니다.

포럼슬라이드 작은개선 - 더욱 보기 편해진 포럼 정보

게시판 가독성을 위한 조치

나눔고딕을 제한적으로 사용하기

나눔 고딕을 기본글꼴로!

활동보고/사진자료 - 슬라이드로 개선!(JQuery)

마르크스21, 소책자 페이지 개선

모든 링크모음 보기개선

사회민주주의 복지국가 모델 어떻게 볼 것인가?

최신글에 'new' 출력하기

포럼을 슬라이드로 보자