Rev. 2.73

ProCSSor.png

ProCSSor는 CSS 마크업을 예쁘고 깔끔하게 포맷해 주는 온라인 서비스입니다. 작성한 CSS코드를 ProCSSor에 붙여넣거나 업로드하거나 URL을 직접입력하는 방법으로 입력하고 옵션을 설정한 후 "procss" 버튼을 클릭하는 것으로 출력됩니다. 깨끗하게 포맷된 코드는 다운로드하거나 다시 복사하여 가져올 수 있습니다. 줄당 속성 표시 방법, 중괄호 스타일, 들여쓰기에 스페이스를 사용할 것인지 탭을 사용할 것인지 등을 설정할 수 있습니다. 특히, 가독성을 높여주는 기능인 "Columnize"는 아주 쩔어요. 저는 아직도 수작업으로 하는 경우가 종종 있습니다만 요녀석을 활용해 볼 생각입니다. 기억해 낸다면 말이죠.

Comments

login.jpg

Alen Grakalic씨는 완벽한 로그인 페이지 해부라는 이름의 포스트에 7가지 항목으로 구분하여 로그인 페이지에 필요한 요소들을 정리했습니다. 늘 다른 서비스의 로그인 페이지를 비교해 가며 작성하다가 참조할만한 문서가 있으면 좋겠다 싶었는데 고맙게도 잘 정리해 주셨네요.

1. 제목

현재 머물러있는 페이지가 무엇에 대한 것인지 간략하게 설명한 타이틀입니다. 특히, 웹사이트의 명칭 또는 서비스 로고를 포함하는 것이 매우 중요합니다. 개인정보를 입력할 때 사용자는 신중해 지기 때문에 자신이 머물러 있는 곳의 위치 정보를 명확하게 표기해야합니다.

2. 회원가입 링크

비회원이 우연히 로그인 페이지로 접근하는 경우가 발생할 수 있습니다. 이 상황은 사이트의 회원으로 가입시킬 절호의 찬스이기 때문에 회원가입 페이지로 유도할 수 있도록 합니다.

3. 레이블과 필드

로그인 양식은 일반적으로 아이디와 암호 2개의 필드로 구성되어 있는데 해당 필드의 레이블을 꼭 작성하여 가독성을 높이는 것이 중요합니다.

4. 비밀번호 분실 링크

이것은 아주 중요한 링크입니다. 사용자들은 상황에 따라서 여러 아이디를 관리하는 경우가 있으며 종종 당신의 사이트에서 어떤 암호를 사용했는지 잊어버릴 수 있습니다. 이 링크는 암호 필드 근처에 위치하는 것이 가장 좋습니다.

5. 제출 버튼

이 버튼은 모든 양식에서 꼭 있어야할 요소입니다. 최고의 사용자 경험을 제공하는 방법은 버튼처럼 보이도록 디자인하는 것입니다.

6. 아이디 기억 옵션

이 옵션을 사용하여 사용자의 아이디를 기억하고 다시 방문했을 때 암호만을 입력하도록 유도할 수 있습니다. 사용자가 빈번하게 로그인 페이지에 접근하는 경우 매우 유용한 요소입니다. 주의해야 할 점은 체크박스는 크기가 작아서 클릭하기가 다소 불편하기 때문에 레이블을 클릭했을때 체크 되도록 처리해주는 것이 좋습니다.

7. 이전 페이지로 이동 링크

로그인 할 의사가 없는 사용자에게 이전 페이지로 돌아갈 수 있도록 링크를 제공하여 순조로운 흐름을 제공합니다.

Comments

guryjs.png

Gury는 Canvas 요소를 이용하여 간단하게 개체를 렌더링하거나 애니메이션을 추가하고, 게임과 같은 인터랙션 컨텐츠를 손쉽게 구현할 수 있도록 도와주는 jQuery용 플러그인입니다. 사용 방법은 다음과 같습니다.

// Create and style a new canvas using gury
$g().size(256, 256).background("#363").add({

  // Hold some object information
  size: 128, theta: 0, dTheta: Math.PI / 120,

  // Updates the object rotation each frame
  update: function() {
    this.theta += this.dTheta;
  },

  // Draws the object onto the canvas each frame
  draw: function(ctx, canvas) {
    ctx.fillStyle = "#ada";
    ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(this.theta);
      ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
    ctx.restore();
  }
})

// Finally place the canvas in the body tag and begin animation
.place("body").play(33);​

Comments