Rev. 2.73

나는 IT 기술이 사회적인 책임을 다하는 보다 나은 자동화 사회를 위하여 개발할 것을 맹세합니다. 나는 자연과 사람에 해를 끼칠 수 있는 목적으로 내 지식을 사용하지 않을 것이며, 개발에 착수하기 앞서 나의 아이디어가 야기할 수 있는 사회적 윤리적인 파급효과를 먼저 생각한 후 개발에 착수할 것을 다짐합니다. 비록 이러한 약속을 지켜나가는 것이 때로는 매우 힘에 겨울지라도 개발에 종사하는 모든 개개인의 사회적 책임감이 인류의 윤택한 삶을 향한 첫번째 발걸음이라는 사실을 깊이 인식하기에 이러한 선서에 기꺼이 서약합니다.

  • 나는 버그를 못본척하지 않으며, 테스트에 충실하여 완성도 높은 제품양산에 총력을 기울이겠습니다.
  • 나는 종교, 국가, 정권, 정파 그리고 지위 여하를 막론하고 한 사용자의 의견으로 받아들이겠습니다.
  • 나는 양심에따라 검증된 코드만을 사용할 것이며, 약간의 배려심으로 주석을 작성할 것입니다.
  • 나는 접근성 사용성을 존중하여 어떠한 요소라도 소홀히 여겨지는 일을 절대 용납하지 않겠습니다.
  • 나는 개발에 대한 전문지식을 꾸준히 발전시켜 항상 최고의 역량을 발휘하기 위해 노력할 것입니다.
  • 나는 목적을 달성한 이후에도 초심을 잊지 않으며, 항상 겸손한 마음으로 매사에 임할 것입니다.
  • 나는 같이하는 동료에게 누가되지 않도록 협업에 용이한 코딩 컨벤션을 지키겠습니다.
  • 나는 싸질러 놓은 코드들을 자식처럼 여기고 힘닫는데까지 책임과 소임을 다하겠습니다.
  • 나는 오픈소스 그룹에서 꾸준히 설레발 치며 공익산업의 발전에 기여하겠습니다.
  • 나는 나의 밥그릇을 잘 챙기고, 하바리들에게 까이는 일이 없도록 맡은바 최선을 다하겠습니다.

당신은 개발자로써 위 선서문에 서약하시겠습니까? 또는 아니오 (막 눌러도 됩니다;)

Comments

Codrops에 실린 Developing Balance in Web Design을 의역한 것입니다. 요소들을 수평 또는 수직으로 배치하고 대칭 또는 비대칭으로 구성하여 웹디자인의 시각적 균형을 이루기위한 5가지 유형과 요인들에 대하여 다루고 있습니다. 당신의 웹사이트 디자인에 시각적 균형이 잡혀있지 않다면 방문객은 혼란에 빠져들고 말 것입니다. 심지어 기분이 나빠지는 방문객도 있다고 합니다. 이러한 문제를 해결하는 가장 좋은 방법은 시각적 균형을 유지하는 것입니다.

일반적으로 웹디자인에서 균형을 이룬다라는 것은 물체의 물리적인 무게를 수평으로 유지하는 것과 흡사합니다. 아주 작은 디자인 요소라도 매우 중요한 질량 포인트가 될 수 있습니다. 실제 물체가 가지는 물리적 무게와 디자인 요소가 가지는 무게는 동등한 시각적 흥미를 이끌어내기 때문입니다. "어떻게 요소간의 균형을 잡아낼 수 있을까?", "요소들에는 어떠한 균형 속성들이 있는가?" 이 두가지를 생각하는 것만으로 조화로운 균형을 당신의 웹디자인에 녹여낼 수 있습니다.

균형의 5가지 유형

균형에는 여러가지 종류가 있습니다. 웹페이지에서 시각적 균형을 이루는 유형은 디자인 요소들이 서로 어떻게 상호작용을 하는지에 따라서 구분됩니다. 아래와 같은 5가지 유형을 이용하여 각 요소들이 가진 중력을 조직화하고 사용자가 편안하게 느낄수 있도록 합시다.

  • 수평 균형
  • 수직 균형
  • 방사형 균형
  • 대칭 균형
  • 비대칭 균형

수평과 수직 균형

시각적으로 관심사를 관리하는 좋은 방법중 하나는 수평 또는 수직으로 균형을 잡는 것입니다. 수평 균형은 왼쪽과 오른쪽으로 요소들을 배치하여 균형을 잡고 수직 균형은 요소를 중앙축에서 위와 아래로 균형을 잡습니다.

Ness_horizontal_exp-585x376.png
Daniel_Martín_vertical_exp.jpg

방사형 균형

방사형 균형은 중앙을 중심으로 요소를 배치하여 균형을 잡는 것입니다. 기본적으로 중앙에 핵심 요소들 두고 그 주위에 다른 요소들을 배치합니다. 마치 해살 같은 느낌입니다.
Polecat_radial_exp.jpg

대칭과 비대칭 균형

수평과 수직 그리고 방사형 균형과 결합하여 나타날수 있는 균형이 대칭 또는 비대칭 균형입니다 대칭 균형은 구도에서 양측이 거울을 보는듯이 서로 대칭되어 있는 것입니다. 종이를 절반으로 접는것 처럼요. 대칭 균형은 그리드 레이아웃이나 건축 등 다방면에서 일반적으로 사용되어 온 매우 공식적인 균형입니다. 그래서 사용자에게 편안함을 제공합니다. 또한 응답형 웹 디자인(responsive web design)처럼 레이아웃이 다양한 크기로 변경되는 경우에도 균형을 잡기 용이하기 때문에 인기가 높아지고 있습니다.

FRONTEND_symmetrical_exp.jpg

비대칭 균형이 아마도 가장 일반적인 형태일 것입니다. 본질적으로 요소들에 의해 균형을 이루고있지만 정확하게는 서로 얽매이지 않습니다. 비대칭 레아아웃은 수준높은 시각적 계층 구조를 가지기때문에 대칭구조에 비해 더욱 흥미롭습니다. 비대칭 유형은 구도에 균형이 없다는 것이 아니라, 요소가 서로 영향을 받지 않도록 배치되는 것을 의미하는 것입니다.

Team-Viget_asymmetrical_exp.jpg

균형의 5가시 속성

구도에서 각 객체는 다른 개체와의 관련성과 동시에 자신만의 속성들을 가지고 있습니다. 균형의 주요 속성은 크기, 색상, 모양, 가치, 위치로 총 5개입니다 이러한 속성들은 개별적으로 대칭 균형을 만들기 위해 사용될 수 있습니다. 또한 이들을 결합하여 비대칭 균형을 만들어냅니다. 이것은 하나가 변화하면 다른 곳에도 영향을 미친다는 의미입니다.

크기

큰 빈 객체는 가벼운 시각적 비중을 가지고있어 보다 작고 뭔가 채워진 고밀도 개체들을 이용하여 균형을 유지할 수 있습니다. 예를 들어 컨텐츠 영역과 사이드바를 가진 블로그에서 객체는 두개의 뚜렷한 크기를 가지고 있습니다. 컨텐츠 영역이 사이드바 보다는 보통 큽니다. 균형을 이루기 위해서는 컨텐츠영역에 공백을 추가하여 시각적 중량감으로 균형을 이루어야합니다. 디자인만으로 대칭 균형을 잡고 싶을 때에는 요소의 시각적 무게에 상관없이 동일한 크기임을 확인할 수 있어야합니다.

Atlason_size_exp.jpg

색상

구도에서 객체의 색상은 개체를 더 가볍게 하거나 무겁게 할 수 있습니다. 어두운 색상은 무겁고 밝은 색상은 가벼워집니다. 예를 들면 사용자의 관심을 필요로하는 개체는 노란색 보다는 빨간색이 더 무겁습니다. 만약 어두운 색상을 가진 요소와 다수의 밝은 색상을 가진 요소들의 균형을 유지하고자한다면 균형의 다른 속성을 조정하는 것 보다 요소들이 위치한 배경 색상을 조정하는것이 효율적일 수 있습니다.

Touchtech_color_exp.jpg

모양

모양은 개체의 형태로, 도구의 균형을 극적으로 바꿀 수 있는 특성입니다. 구불 구불한 모양, 숫돌 형태 등 깨끗한 직선은 시각적으로 매우 재미있습니다. 하지만 너무 복잡한 모양은 오히려 균형을 잡기 곤란하고, 더 혼란스러워집니다. 과감하면서도 깨끗한 복잡도를 가진 개체는 균형을 유지합니다.

InfinVision_shape_exp.jpg

가치

대비 구도에서 균형을 맞추기위한 강한 요소가 될 수 있습니다. 개체의 대비가 높은것만으로 무게감을 실을 수 있습니다. 대비가 낮으면 그만큼 시각적으로 가벼워집니다. 대비는 개체 사이의 균형을 잡는 좋은 방법중 하나입니다. 대비가 전혀 없는 요소에 배경색을 낮은 명암의 질감으로 테두리에 배치하는 것입니다. 그리고 그라데이션이나 그림자는 대비를 낮추기 위해 사용될 수 있습니다.

Galph_value_exp.jpg

위치

위치는 가장 큰 균형 요인입니다. 색상, 크기, 모양, 가치와 다른 점은 요소에서 떨어져 균형을 유지하는 속성이라는 것입니다. 큰 개체가 작은 것보다 무겁지만 중앙 축에 가까운 것은 더 무겁습니다. 즉 중앙축에 가까운 개체는 더 먼 것에 비해 무게가 실린다는 것입니다.

Girl_With_A_Camera_position_exp.jpg

Comments

Felix Gnass씨가 배포한 spin.js는 추가적인 이미지나 CSS를 호출하지 않고 순수 자바스크립트만으로 만들어지는 로딩 알리미입니다. 특정 자바스크립트 라이브러리에 종속적이지 않으며, IE6에서도 사용할 수 있습니다. 이것은 몇몇 HTML요소들에 CSS3에서 지원하는 속성들을 사용해서 그려지는 것이며, 이를 만족하지 못하는 하위 IE계열 브라우저에서는 VML을 이용하여 표현합니다.

다양한 옵션들을 지원하여 라인의 수, 길이, 두깨, 크기, 색상, 속도, 잔상, 그림자를 설정할 수 있으며, stop() 메서드로 중지할 수 있고 spin()메서드로 다시 시작할 수 있습니다. 사용방법은 다음과 같습니다.

var opts = {
  lines: 14, // The number of lines to draw
  length: 11, // The length of each line
  width: 6, // The line thickness
  radius: 19, // The radius of the inner circle
  color: '#000', // #rgb or #rrggbb
  speed: 1, // Rounds per second
  trail: 56, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

// or use default options

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

아래와 같은 코드를 사용하면 jQuery 플러그인으로도 사용할 수 있습니다.

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

Comments