java - enum

Development/Java 2012. 11. 5. 13:34


Java의 enum class는 enumeration 즉, '열거형 타입'을 의미하는 특수한 클래스 입니다. 개발에 필요한 열거형 상수들을 적절히 모아서 조금더 객체지향적으로 사용할 수 있는 고급 기술(?)이고, 소스코드에서 하드코딩 요소를 제거하는데 큰 도움이 됩니다.

Java enum 사용법 1 - 기본 형태
원소들간의 구분은 콤마(,)로 합니다. 그리고 enum 객체 역시 클래스이기 때문에 기본생성자가 있어야합니다. 물론, 아래와 같은 경우에는 생성자를 생략해도 Java가 디폴트 생성자를 만들어줍니다.

1
2
3
4
5
6
public enum FontStyle {
    NORMAL, BOLD, ITALIC, UNDERLINE;
 
    FontStyle() {
    }
}

더 간단하게 인라인 클래스로 배열 선언하듯 사용할 수 있습니다. public으로 설정되어 있기 때문에 SampleClass의 인스턴스를 sample이라고 할 때 sample.FontStyle.NORMAL 처럼 접근할 수 있습니다.
1
2
3
4
public enum SampleClass {
    public enum FontStyle { NORMAL, BOLD, ITALIC, UNDERLINE }
    ...
}


Java enum 사용법 2 - 추가 속성을 부여한 형태
아래는 enum 클래스의 각 원소에 별도 설명을 부여한 형태입니다. 사람이 이해하기 좋은 추가 속성을 지정했습니다. 각 원소 뒤에 괄호를 열고 primitive 속성으로 값을 지정하면 되고, 한개 이상의 경우 콤마로 구분하면됩니다. 단, 이경우에는 설명을 저자할 수 있는 필드가 하나 추가되고 생성자가 이 필드에 값을 설정할 수 있도록 인자가 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public enum FontStyle {<br />
    NORMAL("This font has normal style."),
    BOLD("This font has bold style."),
    ITALIC("This font has italic style."),
    UNDERLINE("This font has underline style.");
 
    // 원소 설명
    private String description;
 
    FontStyle(String description) {
        this.description = description;
    }
    public String getDescription() {
        return this.description;
    }
}


Java enum 사용법 3 - 에러코드/에러설명을 정의한 사례
단순히 에러코드만 반환하는 환경이 아니라 사용자 친숙한 코드/설명 쌍으로 결과를 반환하는경우 또는 로깅을 조금더 보기 좋게 하는 경우 사용법2를 응용해서 속성이 2개인 원소들로 구성된 enum을 만들 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public enum Errors {
    CLIENT_ERROR("ERR_1001""This is client error."),
    IO_ERROR("ERR_1002""This is In/Out error."),
    PARSE_ERROR("ERR_1003""This is parse error."),
    CONTEXT_ERROR("ERR_1004""This is context error.");
 
    private String code;
    private String desc;
 
    Errors(String code, String desc) {
        this.code = code;
        this.desc = desc;
    }
    public String getCode() {
        return this.code;
    }
    public String getDesc() {
        return this.desc;
    }
}

실제로 사용할 때는 그때 그때 다르지만 MYException으로 래핑하기 위해 아래와 같이 throw new를 이용하고 MYException 객체는 인자로 enum 클래스를 받게 했습니다.
1
2
3
4
5
6
7
...
try {
    ...
}
catch (XXException e) {
    throw new MYException(Errors.CLIENT_ERROR);
}


Java enum을 사용하지 않는 경우
enum을 사용하지 않고 위의 폰트 스타일 예를 분기하는 경우, 가장 쉽운 방법은 아래와 같을 겁니다.
1
2
3
if ("NORMAL".equals(fontStyle)) {
    ...
}

이걸 조금 더 구조화해서 개발을 한다면 아래와 같이 별도의 static 클래스를 만들고 int 값으로 비교를 하는 것도 좋은 방법이 되겠죠. 실제로 가장 일반적인 방법이기도 하고요. SWT에서도 UI위젯의 style 속성 정의를 이런 식으로 합니다.
1
2
3
4
5
6
7
8
9
10
class FontStyle {
    public static final int NORMAL = 0;
    public static final int BOLD = 1;
    public static final int ITALIC = 2;
    public static final int UNDERLINE = 3;
}
 
if (fontStyle == FontStyle.NORMAL) {
    ...
}



기존 방법의 문제점
enum은 아래와 같은 문제점들을 해결하기 위해 만들어졌다고 합니다.
  • 형검사를 하지 않으므로 오류발생 소지가 있다.
  • 네임스페이스를 따르지 않으므로 중복의 소지가 있다.
  • 순서 변경, 새로운 원소 추가에 취약합니다.
  • 알아보기가 어렵습니다.

제가 생각하는 enum의 가장 큰 장점은 소스코드 속에서 사용자가 직접 입력한 String을 제거할 수 있다는 것과, 자동 형 검사를 통해 오류를 줄일 수 있다는데 있는것 같습니다. 게다가 enum 클래스는 Java VM 1.5에서 지원하지 시작한 기능으로 아무 추가 작업없이 그냥 쓸 수 있죠.

C로 개발을 할 때도 코드에서 사용할 데이터 구조체와 상수값을 별도의 헤더파일로 뽑아내어 소스코드의 하드코딩 요소들을 제거 했었습니다. enum 클래스 헤더파일을 별도의 클래스로 분리한 겁니다. 형검사라는 강력한 기능이 추가되어서 말이죠.


TODO 다음 번에는 iBatis에서 enum 지원 방법에 대해 작성을 해보려고 합니다.




참고자료
http://download.oracle.com/javase/1.5.0/docs/guide/language/enums.html


출처 - http://powerhan.tistory.com/140






java enum 정리 1 - 기본 개념

enum에 대해서 총 3부작으로 연재를 할려고 합니다.

1 - 기본 개념
2 - enum의 메쏘드
3 - java.lang.Enum 클래스와 enum의 실체

이 글은 그 첫번째로 enum에 대한 개념을 잡는 글입니다.

enum은 비스무레한 원소들이 상수로 정의되는 클래스를 대신하기 위한 것입니다. java 1.5에서 추가되었죠.
Gender를 정의하려면 enum을 사용하지 않으면 다음과 같은 class로 정의할 수 있습니다.

public class Gender{
    public static final int MALE = 1;
    public static final int FEMALE = 2;
}

위와 같은 방법이 가지는 문제점이 몇 가지 있습니다. 
첫째, MALE은 무조건 1이지만, 1이라는 숫자가 MALE만 나타내는 것은 아닙니다. 
둘째, 이 Gender의 값들을 받아서 쓰는 메쏘드에서는 1,2 이외의 숫자가 들어오면 어떤 식으로 처리를 해 주어야 할지 난감합니다.

이런 경우 Gender은 다음과 같은 enum으로 정의하면 됩니다.

public enum Gender {
    MALE, FEMALE 
}

이제 Gender를 인자로 받아서 어떤 성별이 들어왔는지 찍어주는 메쏘드를 만들어봅시다.

public class GenderTest {
    public static void printGender (Gender d){
        System.out.println(d);
    }
    public static void main(String[] args) {
        printGender(Gender.MALE);
    }
}

enum은 swtich - case에서도 사용할 수 있습니다. 이번에는 남자면 "싫어", 여자면 "좋아"를 출력해주는 메쏘드를 만들어봅시다.

public class GenderTest {
    public static void printGender(Gender d){
        System.out.println(d);
    }
    public static void print(Gender d){
        switch (d) {
        case MALE: System.out.println("싫어");break;
        default:        System.out.println("좋아");break;
        }
    }
    public static void main(String[] args) {
        printGender(Gender.MALE);
        print(Gender.MALE);
        print(Gender.FEMALE);
    }
}


여기서 유의할 점은 case MALE: 부분입니다. case Gender.MALE이 아니고 그냥 MALE입니다. switch 에 enum이 들어올 경우 컴파일러가 알아서 case 쪽에는 그 enum의 타입을 적용해 줍니다.

Gender에 어떤 요소들이 들어가 있는 지 살펴볼 수 있는 방법을 소개하죠.

for(Gender g : Gender.values()){
    System.out.println(g);
}

Gender.values() 메쏘드를 호출하면 그 enum에 들어가 있는 모든 요소들이 Gender[] 로 리턴 됩니다.


출처 - http://iilii.egloos.com/4343065/



java enum 정리 2 - enum의 메쏘드

모든 예제는 지난 글에서 썼던 Gender를 그대로 사용합니다. 코드는 아래와 같습니다.

public enum Gender {
    MALE, FEMALE
}

Static Methods

기본으로 정의되는 static method는 모두 3가집니다.

1. valueOf(String arg)

String 으로 넘긴 값을 기준으로 enum의 원소를 가져 옵니다. 즉, Gender.MALE 과 Gender.valueOf("MALE")은 같습니다.


2. valueOf(Class<T> class, String arg)

클래스를 넘겨서 받습니다. 즉, Gender.MALE 와 Gender.valueOf(Gender.class, "MALE"); 는 같습니다. 사실 valueOf(String arg)는 내부적으로 이 메쏘드를 호출합니다.


3. values()

이건 지난 시간에 설명한 그대로 enum의 요소들을 enum 타입의 배열로 리턴합니다. Gender.values() 는 
new Gender[]{Gender.MALE, Gender.FEMALE} 와 같은 값을 가집니다.



Static이 아닌 Method


1. name()
호출된 값의 이름을 리턴합니다. 
Gender.MALE.name() 은 "MALE" 이라는 String 값을 가져옵니다.

2. ordinal()
정의된 순서를 리턴합니다. 0부터 시작합니다.
즉, Gender.MALE.ordinal() 은 0을 Gender.FEMALE.ordinal()은 1을 리턴합니다.

3. compareTo(E o)
E는 자기 자신입니다. 예제로 쓴 Gender의 경우는 Gender가 될 겁니다.
이는 ordinal()을 호출해서 비교합니다. 요소들 간에 어떤 순서가 있을 때 쓰면 됩니다.(요일이 좋은 예가 되겠습니다.)
모든 enum은 Comparable을 구현하고 있습니다. Comparable 인터페이스에는 정의된 compareTo 메쏘드를 구현한 것입니다. 더 자세한 것은 다음 글에서 다루겠습니다.

기타 다른 메쏘드들은 java.lang.Object에 정의된 메쏘드들이거나 java.lang.Class에서 따온 메쏘드들이므로 설명하지 않겠습니다.


enum의 확장

Gender 별로 웃음 소리를 저장하려고 합니다. Gender를 다음과 같이 변경시킵니다.

public enum Gender {
    MALE("하하")
    , FEMALE ("호호");
    
    private String sound;
    Gender(String arg){
        this.sound = arg;
    }
    String getSound(){
        return sound;
    }

}

일반적인 class의 생성자나 메쏘드를 만들 듯이 만들면 됩니다.
위의 코드의 경우 Gender.MALE.getSound()는 "하하"를 리턴합니다.


출처 - http://iilii.egloos.com/4345025



java enum 정리 3 - java.lang.Enum 클래스와 enum의 실체

enum에 대한 마지막 글입니다.

지금까지 사용해온 예제 파일 Gender.java 는 다음과 같습니다.

public enum Gender {
    MALE, FEMALE ;
}

이것을 decompile 툴을 이용해서 decomplie해보면 다음과 같은 코드가 나옵니다.

public final class Gender extends Enum{

    private Gender(String s, int i){
        super(s, i);
    }

    public static Gender[] values(){
        Gender agender[];
        int i;
        Gender agender1[];
        System.arraycopy(agender = ENUM$VALUES, 0, agender1 = new Gender[i = agender.length], 0, i);
        return agender1;
    }

    public static Gender valueOf(String s){
        return (Gender)Enum.valueOf(enumtest/Gender, s);
    }

    public static final Gender MALE;
    public static final Gender FEMALE;
    private static final Gender ENUM$VALUES[];

    static {
        MALE = new Gender("MALE", 0);
        FEMALE = new Gender("FEMALE", 1);
        ENUM$VALUES = (new Gender[] {
            MALE, FEMALE 
        });
    }
}

이 코드는 컴파일은 되지 않습니다. java가 내부적으로 처리를 하는 것입니다. 

일단 눈 여겨 보실 부분은 values(), valueOf() 메쏘드입니다. 자바가 컴파일시에 내부적으로 만들어내는 메쏘들입니다. 그 외에 지난 시간에 말씀드린 메쏘드들은 모두 java.lang.Enum 클래스에 정의되어 있습니다.

또 한가지는 우리가 사용하는 MALE이나 FEMALE과 같은 static 멤버 변수들은 전부 public static final로 정의됩니다. 일반적인 상수처럼 정의해버립니다. 그리고 그 리스트 전부를 ENUM$VALUES라는 변수에 배열로 저장하고 있습니다.



java.lang.Enum 클래스를 열어보면 다음과 같은 클래스 선언부를 가지고 있습니다.

public abstract class Enum<E extends Enum<E>>
        implements Comparable<E>, Serializable

enum이 compareTo 메쏘드가 있는 것은 상위 클래스인 Enum에서 Comparable을 구현했기 때문입니다. 또, Serializable을 구현해서 자유롭게 저장할 수 있습니다.

Enum에 정의된 몇 가지 메쏘드들을 살펴보겠습니다.

public final boolean equals(Object other) { 
    return this==other;
}

멤버 변수같은 거 비교할 필요없습니다. 그냥 자기자신인지를 비교하고 넘어갑니다. Object에 정의되어있는 것과 별로 다르지 않습니다만 final로 선언을 해버렸습니다.


protected final Object clone() throws CloneNotSupportedException {
 throw new CloneNotSupportedException();
}

clone은 지원하지 않습니다. final로 정의해서 어떤 enum도 clone을 지원하지 않도록 만들었습니다. reflection을 쓰더라도 clone을 못하게 막았습니다. enum의 경우는 singleton처럼 사용할 수 있도록 보장해주기 위한 것입니다.
clone을 지원하게 되면 Gender.MALE.equals(Gender.MALE.clone()) 은 true를 리턴해야겠지요. 그러나 위에서 본 바와 같이 equals는 인스턴스의 값을 비교하지 않습니다. 따라서 clone을 지원한다면 equals의 구현도 바뀌어야합니다.


출처 - http://iilii.egloos.com/4346098



java enum - 보충

본 내용은 parleys.com 에 있는 Joshua bloch의 Effective java reload 동영상을 바탕으로 쓴 글입니다.

eunm에 대한 기본 지식이 없다면 이전에 정리해 놓은 글들을 먼저 보시고 보시는 게 좋을 듯합니다.

1. ordinal

enum에는 ordinal() 메쏘드가 있는데, 이 것은 각 element의 순서대로 번호가 생깁니다. 따라서 몇 번째 놈인지를 알아낼 수 있는데, 일반적으로는 사용하지 않는 것이 좋다고 합니다. ordinal의 기본 용도는 jdk 안에 있는 EnumSet이나 EnumMap 등의 성능을 위해 있는 것이지 사용자를 위해 제공하는 것이 아니라고 합니다. 만약 순서가 필요할 경우 final int 로 저장을 하라고 합니다.
ex> 
--- 틀린 예
public enum Day{ SUN, MON,....}
--- 옳은 예
public enum Day{ 
    SUN(1), MON(2), ... ;
    private final int seq;
    public Day(int seq){this.seq = seq}
    public int getSequence(){ return seq; }
}

2. enum을 이용한 singleton

singleton 패턴이 많이 쓰이기는 하지만 몇 가지 보안상 취약한 부분들이 있답니다. (특히 serialize 관련된 부분, 개인적으로 java의 Serialize는 저주라고 생각합니다!) 또, 만들기도 구찮은 부분이 있습니다. (private constructor 등)
ex>
--- class를 이용한 singleton -- Serializable의 저주가 함께하는 클래스!
public class Singleton implements Serializable{
    public static final Singleton INSTANCE = new Singleton();
    private Singleton() {}
    .. 기타 멤버 변수와 각종 메쏘드들.
}
--- enum을 이용한 singleton
public enum Singleton{
    INSTANCE;
    .. 기타 멤버 변수와 각종 메쏘드들.
}

어차피 singleton은 상속이 안 되니까, enum으로 해도 상관없고, 코드도 깔끔해졌습니다. 당근 serialize에 관련된 문제도 해결되었구요.

3. enum의 상속

enum은 기본적으로 상속이 안 됩니다. 상속이 되면 여러가지 문제가 발생할 수 있어서 상속을 없앴다고 합니다. 그러나 interface를 이용할 수는 있습니다.
ex>
public interface Direction{
    int getAngle();
}

public enum DefaultDirection implements Direction{
    동(90), 서(270), 남(180), 북(0);
    private final int angle;
    DefaultDirection (int angle){
        this.angle=angle;
    }
    public int getAngle(){
        return angle;
    }
}

public enum ComplexDirection implements Direction{
    동북(45), 서북(315) , 동남 (135) , 서남(225);
    private final int angle;
    ComplexDirection (int angle){
        this.angle=angle;
    }
    public int getAngle(){
        return angle;
    }
}


출처 - http://iilii.egloos.com/4835713






작년부터 안드로이드 공부를 하면서 조금씩 자바(java) 를 익혀가고 있다.

C++ 이랑 비슷하면서도 참 많이 다른 게 자바인데 그 중에 특히 enum 은 그동안 C++ 에서 불편해 하던 것이

다 구현도 있어서 참 편하다

 

예전에 C++ 관련 쓴 글은 아래 링크 참조

 

기본적인 enum 선언이나 사용법은 자바나 C++ 이나 비슷하다   

public enum Fruit {
    Banana, Apple, Lemon, Tomato, Melon;
}

간단한 과일을 enum 으로 선언했는데, 각 enum 에 어떻게 값이 들어 가는 지는 아래 테스트 코드로 확인 가능

// 간단한enum 확인용테스트코드
for (Fruit f : Fruit.values())
{
    Log.d("log","ordinal: " + f.ordinal());    
    Log.d("log","name: " + f.name());
}

  

 

C++ 처럼 자바도 enum 항목들이 0,1,2,3… 순서대로 저장되고 추가적으로 enum.name() 멤버 함수를 통해 enum 이름도 구할 수 있다.

사실 자바의 enum 은 class 이기 때문에 C++ 보다 훨씬 많은 기능이 가능하고, 예전에 C++ 에서 복잡하게 해 보려 했던 일들(위 링크 참조)이 기본적으로 구현되어 있다.

위 enum 선언을 조금 고쳐서 각 과일에 적당한 한글 이름과 색상 정보를 추가해 보자 .

public enum Fruit {

    Banana("바나나", "노랑"),
    Apple("사과", "빨강"),
    Lemon("레몬", "노랑"),
    Tomato("토마토", "빨강"),
    Melon("멜론", "초록");
   

    private String m_sName;
    private String m_sColor;    

    // 이름, 색상에맞는새로운생성자마련
    Fruit(String sName, String sColor)
    {
        m_sName = sName;
        m_sColor = sColor;
    }

    // 과일색상가져오기함수
    public String getColor()
    {
        return m_sColor;
    }

    // 과일이름가져오기함수
    public String getName()
    {
        return m_sName;
    }
}


코드는 정말 간단 ^^;

enum 옆에 ("바나나", "노랑") 같은 2가지 인자가 추가되었는데,

이처럼 자바는 enum 의 각 항목에 추가적인 정보를 개수 상관없이 마음대로 추가할 수 있다.

물론, 2가지 정보를 추가했기 때문에 enum 생성자를 변경해야 한다

Fruit(String sName, String sColor)

 

이제 각 enum 별로 위 생성자대로 초기화가 진행 되어 각 항목별로 멤버 변수에 값이 할당 된다.

추가된 정보가 잘 들어 갔는지 확인하는 테스트 코드.

// 테스트코드
for (Fruit f : Fruit.values())
{ 
    Log.d(
"log","ordinal: " + f.ordinal());
    Log.d("log","name: " + f.name());            
    Log.d("log","한글이름: " + f.getName());
    Log.d("log","색상: " + f.getColor());
}

위 코드처럼 실행하면 아래 그림처럼, enum 의 각 항목 별로 순서, 원래 이름, 한글 이름, 색상까지 잘 나온다.


자바 enum 의 이러한 확장 기능을 잘 이용하면

데이터를 구분 짓는 ID 와 그 ID 와 연관된 추가적인 정보를 잘 관리 할 수 있어 정보를 체계적으로 다루는 데 아주 용이하다

(물론, 구조체나 클래스로 얼마든지 만들 수 있지만, 기본적으로 언어에서 제공한다는 것은 그만큼 사용하기 편하다는 뜻임)


출처 - http://eslife.tistory.com/537






간단한 선언
예)

  1. public enum Types {  
  2.  TYPE1, TYPE2, TYPE3;  
  3. }  

String 값을 대입
선언 예)
  1. public enum Types {  
  2.  TYPE1("Type 1"),  
  3.  TYPE2("Type 2"),  
  4.  TYPE3("Type 3");  
  5.   
  6.  private String name;  
  7.  Types(String name) {  
  8.   this.name = name;  
  9.  }  
  10.   
  11.  @Override  
  12.  public String toString() {  
  13.   return name;  
  14.  }  
  15. }  

사용 예)
  1. package com.enumtest;  
  2.   
  3. public class EnumTest {  
  4.  public static void main(String[] args) throws Exception {  
  5.   Types type = Types.TYPE1;  
  6.   System.out.println(type);  
  7.  }  
  8. }  

결과: 
Type 1


출처 - http://tjjava.blogspot.kr/2012/06/enum.html







열거형 상수 (enum 타입) 정의 예제


파일명: Foo.java
public class Foo {
  enum Week { 월, 화, 수, 목, 금, 토, 일 }    // 끝에 세미콜론(;)을 붙이지 않음
  enum RGB { red, green, blue }

  public static void main(String args []) {

    // Week 이라는 새로운 자료형으로 Day 라는 변수를 만들어, "금"을 대입.
    Week Day = Week.금;
    System.out.println(Day + "요일");  // 출력 결과: 금요일
    System.out.println(RGB.blue);      // 출력 결과: blue

    System.out.println(Week.토);       // 출력 결과: 토

    Day = Week.일;
    System.out.println(Day);           // 출력 결과: 일

  }
}



열거형 상수 즉 Enumeration 이란, 미리 정해진 일정한 값을 가진 새로운 자료형을 사용자가 직접 만드는 것입니다.

문자열로 정의되어 있지만 내부적으로는 정수로 취급되기에, 일반 배열로 처리할 때보다 속도가 빠릅니다.

가령 일주일은 7개의 요일만 있고, 빛의 삼원색 (RGB) 은 3가지의 색으로만 이루어져 있기에, 이런 데이터를 다룰 때에는 열거형 상수로 정의하여 사용하면 이상적입니다.


상수이기에
Week.토 = Week.일;
이런 대입은 안됩니다. 그러면 Foo.java:12: cannot assign a value to final variable 토 이런 에러가 납니다.


enum 은 반드시 메소드 외부에서 정의해야 합니다. 그렇지 않으면 Foo.java:5: enum types must not be local 이런 에러가 납니다.


자바 버전 5.0 (=1.5) 이상에서만 Enumeration 이 지원됩니다.



출처 - http://mwultong.blogspot.com/2006/10/java-enum-enumeration.html








[번역]자바 Enum의 10가지 예제

원본글 : http://javarevisited.blogspot.sg/2011/08/enum-in-java-example-tutorial.html

자바의 Enumeration(Enum)은 JDK 1.5에 소개되었고, J2SE5에서 내가 가장 좋아하는

특징 중 하나이다.

타입처럼 Java Enum은 NEW,PARTIAL,FILL,FILL or CLOSED와 같은 주문의

대표적인 상태의 예와같이 확실한 상황하에서 더욱 적합하다.

Enumeration(Enum)은 원래 자바에서 이용하지 않았고,  C나 C++같은 다른 언어에서

사용했다.

하지만 결국 자바는 깨닫게 되었고 enum keyword에 의해 JDK 5안에 Enum이 소개되었다.

이 Java enum 튜토리얼안에서 우리는 자바안의 다른 enum 예를 볼 수 있을 것이고

자바안의 enum 사용에 대해 배울 수 있다.

자바안에 Enum에 의해 공급된 다른 특징들과 그것들을 어떻게 사용해야 되는지가

이 Java enum 튜토리얼의 초점이 될 것이다.

만약 당신이 자바 enum을 불편하게 느끼지 않는 것보다 전의 C 혹은 C++에서

Enumeration을 사용하고 있다해도,자바안의 Enum에 대한 나의 의견은

어느 다른 언어보다도 더 다채롭고 다용도로 쓰일 것이다.

  • Java enum 없이 어떻게 enumberable을 표현하는가

자바 enum이 자바 1.5로부터 사용된 이래로, 그것의 가치는 JDK1.5이전의 자바 안

enumerable value를 어떻게 보여주어서 사용할지 혹은 그것이 없이 사용할지에 대한

부분에 대해서 논의했다.

나는 behavior같은 enum을 모방해서 public static final 상수를 사용했다.

개념을 더욱 명확히 이해하기 위해 자바안의 enum 예제를 살펴보자

이 예제에서 우리는 PENNY (1) NICKLE (5), DIME (10), and QUARTER (25) 같이

값을 가지는 열거형처럼 US 통화코인을 사용할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
class CurrencyDenom {
            public static final int PENNY = 1;
            public static final int NICKLE = 5;
            public static final int DIME = 10;
            public static final int QUARTER = 25;
 
      }
 
class Currency {
   int currency; //CurrencyDenom.PENNY,CurrencyDenom.NICKLE,
                 // CurrencyDenom.DIME,CurrencyDenom.QUARTER
}

이것이 우리의 목적을 어느정도 충족해주긴 하지만 몇가지 심각한 한계를 가지고 있다.

(1)No Type-Safety

모든것중에 첫번째는 타입에 대해 안전하지 않다는 것이다. 당신이 99 통화에 대해

어느 유효한 int value값을 할당하려 해도 저 값을 대표하는 coin이 없다.

(2) No Meaningful Printing 

이 상수에 대한 어느것의 값을 출력하는 것은  당신이 “NICKLE “대신에 “5”를 출력할 때

코인의 의미있는 이름 대신에 그것의 numeric 값을 출력하게 될 것이다

(3) No namespace

currencyDenom 상수에 접근하기 위해 우리는 단지 PENNY를 사용하는 대신에

CurrencyDenom.PENNY 클래스이름을 고쳐서 사용할 필요가 있다.

이것은 또한 JDK 1.5안에서 static import를 사용함으로 이루어지게 되었다.

자바 enum은 이 모든 한계에 대한 대답이다. 자바의 enum은 타입에 대해 안전하고,

의미있는 String 이름을 부여하며 자신의 namaspace를 가지고 있다.

지금 위의 예제를 자바 enum을 사용해서 다시 보자.

1
public enum Currency {PENNY, NICKLE, DIME, QUARTER};

여기 Currency는 우리의 enum이고 PENNY, NICKLE, DIME, QUARTER는 enum의 상수다.

enum상수 주변에 중괄호를 주목하라. 왜냐하면 enums는 자바의 클래스나 인터페이스

같은 타입이기 때문이다.

또한 우리는 클래스나 인터페이스처럼 enum을 위한 유사한 naming convention을 따를 것이고,

enum 상수들은 static final을 내재한 이후로 우리는 자바안의 상수처럼 그들을 표시하기 위해

모두 대문자로 사용한다.

  • 자바안의 Enum은 무엇인가?

지금 “자바안의 enum은 무엇인가“에 대한 기본적인 질문으로 돌아가는 것이

자바의 키워드이며, 자바 enum에 대한 더욱 자세한 조항은 클래스나 인터페이스와 같은 타입이고

enum 상수로 정의해 사용할 수 있다.

enum 상수에 static과 final이 내재되어 있고, 당신은 한번 만들어지면 값을 바꿀 수 없다.

자바안의 Enum은 타입에 대해 안전하고 int 변수처럼 switch statement안에서 사용된다.

enum은 너가 변수 이름처럼 사용할 수 없는 키워드이며, JDK1.5에 소개된 이후로 너의 모든 이전 코드는

변수 이름과 같은 enum은 돌아가지 않을 것이고 리팩토링할 필요가 있을 것이다.

  • 자바의 Enum에 대한 이익

1) Enum은 타입에 대해 안전하다. 당신은 미리 정의된 enum 변수안의 상수외 다른 것을 할당할 수 없다.

2) Enum은 그 자신의 name-space를 가진다.

3) Enum의 가장 큰 특징은 int나 char같이 원시타입처럼 switch statememt 안에서 Enum을 사용할 수 있다.

4) 자바의 Enum은 새로운 상수를 추가하기가 쉽고, 기존에 존재하는 코드를 고치지 않고 새로운 상수를 추가할

수 있다.

  • 자바의 Enum에 대한 중요한 점

1) 자바안의 Enums는 타입에 대해 안전하고 자신의 name-space를 가진다. 그것은 enum이 type값을 가진다는 것이고

아래 “Currency” 예제에서 Enum 상수안에 명기된 것 외 어떤 다른 값도 할당할 수 없다

1
2
3
public enum Currency {PENNY, NICKLE, DIME, QUARTER};
Currency coin = Currency.PENNY;
coin = 1; //compilation error

2) 지바안의 Enums는 클래스 혹은 인터페이스처럼 타입을 참조한다. 생성자를 정의할 수 있고, 자바 enum안의 메서드나 변수는

자바의 enum type의 다음 예제에서 보여준 것처럼 C나 C++안의 Enum보다 더욱 파워풀하게 만든다

3) 아래 예제에서 보는 것처럼 만들때 enum 상수에 값을 명기할 수 있다.

1
public enum Currency {PENNY(1), NICKLE(5), DIME(10), QUARTER(25)};

그러나 멤버변수나 생성자를 이용할 필요가 있을 때 이것을 해야한다. 왜냐하면 PENNY(1)은 정말로 아래 예제에서 보는 것처럼

int value를 가지는 생성자를 호출하기 때문이다.

1
2
3
4
5
6
7
8
public enum Currency {
        PENNY(1), NICKLE(5), DIME(10), QUARTER(25);
        private int value;
 
        private Currency(int value) {
                this.value = value;
        }
};

자바 enum의 생성자는 private이고, 다른 접근제어자는 에러가 나올 것이다. 지금 각 코인에 연결된 값을 가져오기 위해 어느 평범한

자바 클래스처럼 자바 enum안에 public getValue()메서드를 정의할 있다. 또한 첫번째 라인의 세미콜론은 선택이다.

4) Enum 상수들은 static과 final을 내재하고 한번 만들어지면 바꿀 수 없다. 아래 코드는 에러를 뱉어낼 것이다

1
2
Currency.PENNY = Currency.DIME;
The final field EnumExamples.Currency.PENNY cannot be re assigned.

5) 자바의 Enum은 int, char처럼 switch statement의 인자로 사용할 수 있다. 이런 특징은 switch문에서

매우 유용하다. switch statement에서 java enum을 어떻게 사용하는지 아래 예를 보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Currency usCoin = Currency.DIME;
    switch (usCoin) {
            case PENNY:
                    System.out.println("Penny coin");
                    break;
            case NICKLE:
                    System.out.println("Nickle coin");
                    break;
            case DIME:
                    System.out.println("Dime coin");
                    break;
            case QUARTER:
                    System.out.println("Quarter coin");
    }

6) enum안에 정의된 상수들은 final이고, 비교할때는 “==”를 사용한다.

1
2
3
4
5
Currency usCoin = Currency.DIME;
    if(usCoin == Currency.DIME){
       System.out.println("enum in java can be"+
               "compared using ==");
    }

7) 자바 컴파일러는 자동으로 모든 enum을 위한 static values() 메서드를 제공한다.

Values() 메서드는 enum 상수의 배열을 리턴한다. values()를 사용해서 enums의 값들을

배열을 돌면서 사용할 수 있다.

1
2
3
4
5
6
7
8
for(Currency coin: Currency.values()){
        System.out.println("coin: " + coin);
    }
And it will print:
coin: PENNY
coin: NICKLE
coin: DIME
coin: QUARTER

enums안에 정의된 순서와 동일하다는 것에 주목하라

8) Enum은 메서드를 오버라이드 할 수 있다. 아래예제처럼 enum안에 toString()메서드를

오버라이드 해서 enums 상수들을 위한 의미있는 설명을 제공하고 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
  public String toString() {
       switch (this) {
         case PENNY:
              System.out.println("Penny: " + value);
              break;
         case NICKLE:
              System.out.println("Nickle: " + value);
              break;
         case DIME:
              System.out.println("Dime: " + value);
              break;
         case QUARTER:
              System.out.println("Quarter: " + value);
        }
  return super.toString();
 }
};

그리고 여기 그것이 어떻게 보여지는지 나와있다.

1
2
3
4
5
Currency usCoin = Currency.DIME;
System.out.println(usCoin);
 
output:
Dime: 10

9) 두개의 새로운 컬렉션 클래스 EnumMap과 EnumSet은 추가되었고, 자바 enum을 지원하기 위해 컬렉션

패키지에 추가되었다. 이러한 클래스들은 자바의 Map과 Set 인터페이스에서 높은 성능을 보이며 우리는

어떤 기회에서든지 이것을 사용할 수 있다

10) 자바의 new 연산자를 사용해서 객체를 생성할 수 없다. 왜냐하면 Enum의 생성자가 private이고

Enums 상수는 오직 Enums 그 자신 안에서는 만들어질 수 있다.

11) 자바 enums의 객체는 어떤 enums 상수가 코드안에서 처음 호출되거나 참조될 때 만들어진다.

12) 자바의 Enum은 인터페이스를 구현하고 평범한 클래스처럼 어느 메서드라도 오버라이드 할 수 있다.

그것은 또한 Serializable과 Comparable 인터페이스 둘다 구현을 내재하고 있다.

java enum을 사용하여 인터페이스를 어떻게 구현하는지 아래 예를 보자

1
2
3
4
5
6
7
8
9
10
11
public enum Currency implements Runnable{
  PENNY(1), NICKLE(5), DIME(10), QUARTER(25);
  private int value;
  ............
 
  @Override
  public void run() {
  System.out.println("Enum in Java implement interfaces");
 
   }
}

13) 자바의 enum안에 추상메서드도 정의할 수 있다. 또한 enum의 다른 객체를 위해 다른

구현을 제공할 수도 있다. 아래 enum안에 추상메서드를 사용한 예제를 보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public enum Currency implements Runnable{
          PENNY(1) {
                  @Override
                  public String color() {
                          return "copper";
                  }
          }, NICKLE(5) {
                  @Override
                  public String color() {
                          return "bronze";
                  }
          }, DIME(10) {
                  @Override
                  public String color() {
                          return "silver";
                  }
          }, QUARTER(25) {
                  @Override
                  public String color() {
                          return "silver";
                  }
          };
          private int value;
 
          public abstract String color();
 
          private Currency(int value) {
                  this.value = value;
          }
          ..............
  }

이번 예에서 모든 코인은 color() 추상메서드를 만들어 다른 컬러를 가지게 될 것이고, 자신의 컬러가

정의된 enum 객체를 가지게 될 것이다.

color()메서드를 호출해서 어느 코인의 컬러를 아래예처럼 가져올 수 있다.

1
System.out.println("Color: " + Currency.DIME.color());
  • Enum valueof의 예

나의 구독자 중에 한명이 enum에서 String을 바꾸는valueOf메서드에 대해 언급되지 않았다는 걸 알려주었다.

여기 그가 제안한게 있다.

“enum의 valueOf()메서드를 포함할 수 있다. valueOf()는 static 메서드이고 String 인자값을 가지고

enum안에 String을 바꿔 사용할 수 있다.

한가지 생각해야 할건 enum의 valueOf(String)메서드는

“Exception in thread “main” java.lang.IllegalArgumentException: No enum const class

예외를 던질수 있다는 것이다.

ordenal()과 name() 유틸리티 메서드에 제안한 또 다른 독자는 Ordinal은 enum 상수의 포지션(순서)

를 리턴해주고, 특별한 enum 상수를 만들때 정확한 스트링을 리턴하도록 name()이 선언되어 있다라고 한다

*자바 enum의 대해선 아래 블로그에 정리가 잘 되어 있으니 참고하세요




출처 - http://bluepoet.me/2012/07/18/%EB%B2%88%EC%97%AD%EC%9E%90%EB%B0%94-enum%EC%9D%98-10%EA%B0%80%EC%A7%80-%EC%98%88%EC%A0%9C/




'Development > Java' 카테고리의 다른 글

java - jar  (0) 2012.11.09
java 로드맵  (0) 2012.11.07
java - @Override  (0) 2012.11.03
java - 문자열, 숫자, 영문 배열 및 list 정렬(sort)  (0) 2012.11.02
java - 클래스 구조 및 헬퍼 클래스(helper class)  (0) 2012.10.30
Posted by linuxism
,


두 함수의 차이는 멤버 변수의 값을 수정하는지(mutator) 또는 수정하지 않는지(accessor)과 관건입니다.


accessor : 멤버 변수를 수정하지 않고 단순히 읽거나 출력하는 함수를 이야기 합니다. 대표적인 예는 멤버 변수의 값을 그대로 출력하는 출력함수를 들 수 있습니다. 일반 함수라도 멤버 변수의 값을 바꾸지 않으면 accessor 함수가 됩니다.


mutator : 멤버 변수의 값을 수정하는 함수를 이야기 합니다. 대표적인 예는 값을 입력받아 멤버 변수의 값을 수정하는(멤버 변수에 어떤 값을 대입하는) 입력 함수를 들 수 있습니다. 일반 함수라도 멤버 변수의 값을 바꾸면(수정하면) mutator 함수가 됩니다.


출처 - http://220.70.2.30/Course/Course_unGClassLst.asp?pType=Course&spType=unGClassLst&Method=View&T_Code=Q36&B_Idx=4855&pageno=&startpage=71



'Development > Common' 카테고리의 다른 글

SMTP & POP3 Server list  (0) 2013.02.11
context  (0) 2012.11.21
ISO 8601 - 날짜와 시간 표기 국제 표준 규격  (1) 2012.10.02
http - Content Length와 Transfer Encoding  (0) 2012.07.18
특수문자 이름  (0) 2012.07.17
Posted by linuxism
,

Bootstrap 소개

Web/Common 2012. 11. 4. 22:58


NHN 플랫폼Ajax팀 박경일

부트스트랩(Bootstrap)은 트위터에서 오픈 소스로 공개한 웹 프런트 엔드 개발 도구입니다. 부트스트랩은 유연한 HTML, CSS, JavaScript 템플릿과 다양한 UI 컴포넌트, 인터랙션을 제공해서 웹 사이트를 구축하는 시작점이 될 수 있습니다. 이 글에서는 부트스트랩의 특징이 무엇이고 어떻게 부트스트랩으로 웹 사이트 구축을 시작할 수 있는지 간단하게 알아 보겠습니다.

Bootstrap from Twitter

웹 UI 개발은 쉬워 보이면서도 직접 접하면 수많은 어려움에 부딪히게 된다. 단일한 클라이언트 환경만 고려하면 되는 다른 UI 개발과는 달리, 웹 UI 개발은 다양한 브라우저 환경에서 호환성을 충족시키는 크로스 브라우징(Cross Browsing) 작업이 필요하다.

Internet Explorer, Firefox, Chrome, Safari, Opera 등 PC에서 많이 사용하는 브라우저만 해도 5가지이며, 각 브라우저의 버전이나 운영체제에 따라 별도의 작업을 해야 하는 경우도 있다. 게다가 최근에는 스마트폰, 태블릿 PC 등 다양한 스크린 크기와 기기에 특화된 브라우저가 있는 모바일 환경까지 고려해야 하는 상황이다.

중소규모의 웹 사이트에서 이렇게 다양하고 복잡한 브라우저 환경에 대응해 크로스 브라우징 작업을 하기에는 부담이 많을 수 밖에 없다. 트위터의 프런트 엔드(Front End) 툴킷인 부트스트랩 (Bootstrap)은 이런 어려움을 해결해 간편하고 빠르게 유연한 사이트를 구현할 수 있는 시작점을 제공해 준다.

부트스트랩은 트위터의 UI 디자이너 Mark Otto와 개발자 Jacob Thornton이 만든 오픈소스 프런트 엔드 툴킷이다. 부트스트랩의 의미가 "컴퓨터의 전원을 켜거나 리셋 키를 누르는 따위의 동작으로 시스템을 시동하는 일"이라는 것에서 알 수 있듯이 부트스트랩은 웹 사이트를 구축하는 시작점으로 유연한 HTML, CSS, JavaScript 템플릿을 제공한다. 또한, 자주 사용하는 다양한 UI 컴포넌트와 인터랙션을 포함하고 있다.

이 글에서는 부트스트랩이 제공하는 요소와 부트스트랩의 특징을 살펴보면서 부트스트랩으로 어떻게 웹 사이트를 만들 수 있을지 간단하게 알아 보겠다.

격자 시스템

격자(Grid)는 레이아웃 디자인에 있어 기본적인 요소이다. 웹 페이지의 레이아웃은 일반적으로 <div> 태그와 CSS를 이용해 화면을 분할해 요소를 배치한다. 이러한 화면 분할을 정형화해서 격자 레이아웃 시스템을 제공하는 CSS 프레임워크로는Blueprint960 gridYUI CSS grids 등이 유명하다.

부트스트랩도 자체적인 격자 레이아웃 시스템을 제공한다. 부트스트랩의 격자 시스템은 12열의 격자(12-column grid)로 이루어져 있으며 기본 버전과 유동 버전이 있다. 또한 다양한 화면 크기에 대응하기 위해 4개의 디자인 변형체를 갖는데 이는 나중에 설명할 반응형 디자인과 연계되어 동작한다.

기본 격자 시스템

기본 격자 시스템(Default grid system)은 940px 고정 너비에 12열 격자로 이루어진다.

행은 "row", 열은 "span*"이라는 클래스로 표현되는데, "span*" 클래스는 span1~12 까지 사용할 수 있다.

열 사이의 간격은 20px이며 "span1" 클래스의 너비는 60px이다. "span*" 클래스의 숫자가 하나씩 증가할 때마다 너비가 80px씩 늘어나 "span12" 클래스의 너비는 전체 너비인 940px이 된다.

fea5f257d28fadbca6ceff64a0f03c65.png

그림 1. 12열 격자 시스템

그림 1에서 3번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있으며, 화면에 300px + 20px + 620px 크기의 영역(전체 940px)으로 표현된다.

1
2
3
4
<div class="row">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

유동 격자 시스템

유동 격자 시스템(Fluid grid system)은 격자 크기를 픽셀이 아닌 퍼센트로 사용한다. 유동 격자 시스템을 사용하려면 행의 클래스를 "row-fluid"로 바꾸기만 하면 된다.

1
2
3
4
<div class="row-fluid">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

열 위치 이동하기 (Offsetting columns)

열에 "offset*" 클래스를 추가하면 열을 오른쪽으로 이동시켜 배치할 수 있다. 단, 열 위치 이동은 기본 격자 시스템에서만 가능하다.

92a4908c7e06a6ff1d880be4116110b9.png

그림 2. 오프셋을 이용한 격자 위치 이동

그림 2에서 첫 번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있다. 두 번째 열에 해당하는 <div>는 격자 4개의 너비(offset4)만큼 오른쪽으로 이동한다.

1
2
3
4
<div class="row">
    <div class="span4">…</div>
    <div class="span4 offset4">…</div>
</div>

열 내부에 격자 포함하기

<그림 3> 과 같이 열 내부에 격자를 포함시키려면 "row" 클래스와 "span*" 클래스가 있는 새로운 <div> 태그를 추가로 지정하면 된다.

400128dcaaac7f667cf4f3ad9bdffc95.png

그림 3. 중첩 격자

기본 격자인 경우는 내부 열의 합이 부모 열의 숫자가 되도록 지정한다.

1
2
3
4
5
6
7
8
9
<div class="row">
    <div class="span6">
    Level 1 of column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">Level 2</div>
        </div>
    </div>
</div>

유동 격자인 경우는 퍼센트로 되어 있어 내부 열의 합이 부모열의 숫자가 아닌 12가 되도록 지정한다.

1
2
3
4
5
6
7
8
9
<div class="row-fluid">
    <div class="span6">
    Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

반응형 디자인

반응형 디자인(Responsive Design)이란 CSS3의 미디어쿼리(media query)를 이용해 PC, 태블릿 PC, 스마트폰 등 다양한 기기의 해상도나 화면 크기에 최적화된 레이아웃으로 자동으로 변환되도록 디자인하는 기법을 말한다.

부트스트랩은 유연하고 간단한 화면 구성을 위해 격자 시스템과 함께 반응형 디자인을 적용해 제공한다. 반응형 디자인을 적용하면 격자의 크기도 화면 크기에 따라 다음 표와 같이 변경된다.
표 1. 기기에 따른 격자 크기의 변화

구분

화면 너비

격자 열 너비

격자 열 간격 너비

스마트폰

480px 이하

고정되지 않은 가변 폭

세로 모드 태블릿 PC

767px 이하

고정되지 않은 가변 폭

가로 모드 태블릿 PC

768px 이상

42px

20px

기본

980px 이상

60px

20px

와이드 모니터

1200px 이상

70px

30px

다음 그림은 반응형 디자인을 적용해 화면 크기에 따라 레이아웃이 변하는 예이다.

d693b1bd1908b2ec062c1cb26aef620b.png    

그림 4. 화면 크기에 따른 반응형 디자인

기기의 크기에 반응해 미디어 쿼리가 동작하도록 하는 CSS는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
// Landscape phones and down
@media (max-width: 480px) { ... }
  
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
  
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
  
// Large desktop
@media (min-width: 1200px) { ... }

또한, 이 CSS에는 기기에 최적화된 내용이 보이도록 하는 유틸리티(utility)성격의 선택자(selector)가 포함되어 있다.

표 2 기기별 반응형 CSS 클래스

클래스

휴대폰

480px 이하

태블릿 PC

767px 이하

데스크톱

768px 이상

.visible-phone

보임

보이지 않음

보이지 않음

.visible-tablet

보이지 않음

보임

보이지 않음

.visible-desktop

보이지 않음

보이지 않음

보임

.hidden-phone

보이지 않음

보임

보임

.hidden-tablet

보임

보이지 않음

보임

.hidden-desktop

보임

보임

보이지 않음

깔끔하고 정돈된 느낌의 기본 CSS 제공

부트스트랩은 기본으로 적용한 CSS를 적용해도 깔끔하고 잘 정돈된 느낌의 버튼과 여러 스타일을 제공한다.

다음은 부트스트랩에서 기본으로 제공하는 버튼 디자인이다.

표 3 버튼 종류별 CSS 클래스 예

버튼

class=""

설명

8b65d3ce21038004504352fd65f9a6d4.png

btn

그라데이션이 적용된 회색 기본 버튼

d01b03fd7364b16709d54fdd6677ed6b.png

btn btn-primary

시각적으로 강조해야 할 필요가 있거나 특별한 행동을 하는 것을 표시하는 버튼

27f6354b3b87505e9a464ae3d4f50c6b.png

btn btn-info

기본 버튼을 대체해서 사용할 수 있는 버튼

34a0b3adb9fce45a517ce59b4c501ca4.png

btn btn-success

성공한 행동이나 긍정적인 행동을 표시하는 버튼

d20338e43681128407da7dcb39d8f69a.png

btn btn-warning

주의 버튼

c2f705a5ceb4d63234e47fd435f6b2f8.png

btn btn-danger

위험이나 부정적인 영향이 있음을 표시하는 버튼

c4178273a449e4c7c571ef32cc2f7b72.png

btn btn-inverse

특별한 의미 없이 일반적으로 사용할 수 있는 어두운 회색 버튼

다음은 부트스트랩에서 기본으로 제공하는 폼(Form) 디자인이다.

91ca055eb6ec5e5a5e4ac16c6c531bc7.png

그림 5. 폼 표현 CSS 클래스

부트스트랩은 처음에는 Internet Explorer를 지원하지 않았다. 그러나 나중에 Internet Explorer 7 이상에서도 호환되도록 바꾸었다. 이 여파로 Internet Explorer에서는 디자인이 완전히 동일하지 않다. 그라데이션(gradation)과 둥근 모서리(rounded-border) 등 CSS 지원 여부에 따라 보이는 모양이 조금씩 다를 수 있다. 하지만 전체적인 레이아웃과 색감 등은 유지하고 있다.

63263abf1fe0f229a3bcc626380810e2.png

그림 6. Internet Explorer에서의 폼 표현 예제 비교.

CSS 리셋(Reset)에는 Nicolas Gallagher의 normalize.css를 사용하고 있으며 UI의 아이콘 이미지는 Glyphicons에서 제공한 아이콘 셋을 이용하고 있다. 아이콘 셋은 단일 이미지로 CSS 스프라이트(CSS Sprite) 기법을 적용해 사용하고 있다.

e75a758b7d20f655fa34dfd6ec69c174.png

그림 7. Glyphicons 아이콘 셋

다음은 아이콘 셋을 적용한 UI 컴포넌트의 예이다.

a330ec77cf395920ac48ad3494073e25.png

그림 8. 아이콘 셋이 적용된 UI 컴포넌트

부트스트랩의 CSS는 나중에 설명할 LESS로 작성되어 있어서 쉽게 고쳐서 테마를 재생산할 수 있다.

UI 컴포넌트와 jQuery 플러그인

웹 페이지를 제작할 때 자주 사용하는 UI 패턴이 있다. 이러한 패턴을 재사용하기 쉽도록 마크업과 CSS, JavaScript를 묶어서 제공하는 것을 UI 컴포넌트라고 부른다.

부트스트랩에는 기본 CSS가 적용되어 있어 손쉽게 가져다 쓰면 되는 다양한 UI 컴포넌트가 있다. 그 중 동적인 인터랙션이 필요한 컴포넌트는 jQuery 플러그인 형태의 JavaScript로 컨트롤할 수 있도록 했다.

기본 CSS를 사용하는 컴포넌트에는 버튼 그룹, 드롭다운 목록, 내비게이션, 탭, 페이지 이동 버튼, 배지, 섬네일 레이아웃, 경고 표시, 닫기 아이콘 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/components.html 페이지를 참조한다.

jQuery 플러그인으로 인터랙션을 컨트롤하는 컴포넌트에는 모달 레이어, 드롭다운, 토글 탭, 툴팁 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/javascript.html를 참조한다.

참고

NHN에서도 손쉽게 가져다 사용할 수 있는 컴포넌트를 공개하고 있다.

UIO Factory(http://html.nhndesign.com/uio_factory)는 정적인 UI 패턴 모음을 제공하고 있으며, 동적인 UI를 위한 컴포넌트는 Jindo 프레임워크 기반의 Jindo Component(http://dev.naver.com/projects/jindo/)로 제공하고 잇다.

LESS

일반 프로그래밍 언어와 달리 CSS는 상속이나 변수 등의 개념이 없어서 단순히 화면 높이가 변경되어도 일일이 찾아서 수정해야 한다. CSS 작성과 관리가 번거롭기 때문에 이러한 어려움을 해결하고자 CSS 전처리 도구들이 생겨났다.

CSS 전처리 도구는 기존 CSS 문법을 확장해 자체적으로 정의한 문법을 가지고 있다. 확장한 문법으로 변수나 믹스인(mixin), 상속, 연산, 함수 등의 기능을 기술할 수 있으며, 확장 CSS로 작성된 코드를 컴파일해 브라우저에 호환하는 최종 CSS를 만들어 낸다. CSS3에 이러한 동적이고 객체지향적인 개념이 빠진 것에 대해 아쉬움을 갖는 사람도 있었다.

대표적인 CSS 전처리 도구에는 LESSSassStylus 등이 있는데, 문법이나 기능은 대동소이하다. 부트스트랩은 이 가운데 LESS를 CSS 전처리 도구로 사용한다.

상당한 장점에도 불구하고 국내의 사이트들이 실무에서 이러한 CSS 전처리 도구를 적용한 사례는 거의 없다. 컴파일해야 하는 불편함도 있지만 홈페이지 디자인을 주로 단발성 외주로 처리하는 등의 환경으로 인해 이전 CSS가 재사용되지 않고 버려지고, 잘 구조화된 마크업과 CSS를 작성할 수 있는 전문가도 많지 않기 때문이다. 해외에서는 부트스트랩이 github로 공개되자 CSS 전처리 도구를 LESS대신 Sass나 Stylus로 변경한 프로젝트도 만들어지는 등 활발히 연구하고 활용하고 있다.

LESS에 대해 좀 더 알아보도록 하자.

LESS 문법

LESS 문법은 표준 CSS 문법에 기능만 확장한 문법을 사용한다.

변수 선언

변수를 선언할 때에는 @ 심볼을 이용한다.

1
2
3
4
5
6
7
8
9
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
  
body {
    color: @mainColor;
    border: 1px @borderStyle @mainColor;
    max-width: @siteWidth;
}

믹스인 함수

다음과 같이 클래스 선택자와 유사한 형태로 믹스인 함수를 만들어 활용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
    border: @borderWidth solid #F00;
    color: #F00;
}
  
.generic-error {
    padding: 20px;
    margin: 4px;
    .error(); /* Applies styles from mixin error */
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

상속

LESS는 클래스 선택자 형태로 믹스인 함수를 정의하기 때문에 일반 클래스 선택자도 믹스인 함수처럼 사용할 수 있어서 다음과 같이 상속을 표현할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.block {
    margin: 10px 5px;
    padding: 2px;
}
  
p {
    .block; /* Inherit styles from '.block' */
    border: 1px solid #EEE;
}
ul, ol {
    .block; /* Inherit styles from '.block' */
    color: #333;
    text-transform: uppercase;
}

연산자

연산이 가능한 속성값에는 다음과 같이 간단한 연산자를 사용할 수도 있다.

1
2
3
4
5
6
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: 100px - 50px;
    left: 10 * 10;
}

중첩된 선택자

다음과 같이 중첩된 선택자를 표현할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section {
    margin: 10px;
  
    nav {
        height: 25px;
      
        a {
            color: #0982C1;
          
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

중첩된 선택자를 컴파일하면 다음과 같은 CSS가 나온다.

1
2
3
4
5
6
7
8
9
10
11
12
section {
    margin: 10px;
}
section nav {
    height: 25px;
}
section nav a {
    color: #0982C1;
}
section nav a:hover {
    text-decoration: underline;
}

부트스트랩 LESS

부트스트랩에는 레이아웃과 컴포넌트와 관련해 미리 정의한 수많은 LESS 변수와 믹스인이 있다. 미리 정의된 변수와 믹스인을 수정해 간단하게 변경할 수 있으며 다양한 테마를 만들어 낼 수 있다.

부트스트랩에서 기본으로 정의한 LESS 변수와 값의 예이다. 자세한 내용은http://twitter.github.com/bootstrap/less.html#variables 페이지를 참조한다.

fa88a75d98a1cdd6aa2f9ff6bb8b16c8.png

그림 9 부트스트랩의 다양한 LESS 변수

다음은 부트스트랩에서 기본으로 정의한 믹스인의 예이다. 자세한 내용은http://twitter.github.com/bootstrap/less.html#mixins 페이지를 참조한다.

52ce72d10b35598b0a8f817dcd665342.png

그림 11. 부트스트랩의 다양한 LESS 믹스인들

LESS 컴파일

LESS 컴파일은 클라이언트 방식과 서버 방식이 있다.

클라이언트 방식은 less.js 파일을 웹 서버에 두고 다음과 같이 링크하면 된다.

1
<link rel="stylesheet/less" href="http://helloworld.naver.com/bootstrap.less" <script="" src="http://helloworld.naver.com/less.js">

서버 방식은 node.js 패키지 매니저에서 컴파일러를 받아 설치한 후 사용한다.

1
2
$ npm install –g less
$ lessc bootstrap.less > bootstrap.css

커스터마이징

부트스트랩 홈페이지에서는 LESS에 적용된 변수 값을 변경하고 자신이 사용할 CSS와 jQuery 플러그인만 선택해 커스터마이징한 세트를 다운로드할 수 있다.

컴포넌트와 jQuery 플러그인을 선택하면 필요한 CSS와 JavaScript만 골라서 받을 수 있다.

85319acad8a3b474128bc170ee04ef6b.png

그림 12 부트스트랩 커스터마이징 페이지

LESS 컴파일러가 없어도 커스터마이징 페이지에서 LESS 변수에 적용된 값을 원하는 대로 변경할 수 있다.

2d8eb68069ceeee3f16e7638cb4ab753.png

그림 13 LESS 변수 값 커스터마이징

컴포넌트와 jQuery 플러그인을 선택하고 LESS 변수 값을 수정한 다음 다운로드 버튼을 클릭하면 자신이 선택한 CSS와 JavaScript를 압축한 .zip 파일을 다운로드할 수 있다.

23cfea2b6ff9acf18482dd56acf6e589.png

그림 14. 커스터마이징 결과 다운로드

커스터마이징 페이지 이외에도 http://bootswatch.com/ , http://wrapbootstrap.com/http://stylebootstrap.info/ 등과 같은 다양한 부트스트랩용 테마 제공 사이트를 활용할 수도 있다.

마치며

지금까지 트위터의 프런트 엔드 개발 프레임워크라고 할 수 있는 부트스트랩에 대해 살펴보았다. 사실 개별적으로 떼어 보면 새로운 기술이 있는 것이 아니다. 특별할 것이 없어 보인다. 하지만 github에서 Watch와 Fork 횟수가 수위에 오를 정도로 인기가 높고 다양한 관련 사이트가 존재한다.

얼핏 보면 무언가 특별한 것이 없어 보이지만 그 안에는 트위터의 프런트 엔드 개발 노하우가 고스란히 녹아 있고 개발자들이 쉽고 빠르게 가져다 활용할 수 있도록 잘 구성해 놓았다. 부트스트랩 소개 페이지(http://twitter.github.com/bootstrap/)에서도 설명하듯이 괴짜 개발자들이 괴짜 개발자들을 위해 만들었기(Built for and by nerds)때문이 아닌가 싶다.

참고 문헌

[1] Bootstrap, from Twitter: http://twitter.github.com/bootstrap/

[2] Stepping Out Width Bootstrap from Twitter: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

[3] CSS3 미디어 쿼리: http://www.w3.org/TR/css3-mediaqueries/

[4] Sass vs. LESS vs. Stylus: http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

[5] 20 Resources for Bootstrap Lovers: http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/

pki.jpg
NHN 플랫폼Ajax팀 박경일
현재 NHN 플랫폼Ajax팀에서 Javascript CI 서버와 각종 도구 개발을 담당하고 있습니다. 개발하는 일이라면 이것 저것 가리지 않고 좋아합니다. 백발의 개발자를 꿈꾸며...

출처 - http://helloworld.naver.com/helloworld/textyle/67876





1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark Otto와 Jacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.

2. 부트스트랩 다운로드

부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.

3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.

저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;

4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.

5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다.  특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;

6. 더 많은 정보들.

http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.

http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.

http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.

http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다. :)

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.

7. 국내 부트스트랩 적용된 사이트들

http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)

http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. (https://github.com/sungchi/feed9)

8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게  꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.


출처 - http://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/





제목이 거창하지요....ㅎㅎㅎㅎ.
제가 부트스랩을 알고서부터 티스토리 블로그에 적용해볼려고 이것 저것 살펴보고 적용해보고 하는 과정에서 싸여만 가는 정보가 넘 많아서 이렇게 중간에 공유하게 됐습니다.

부트스트랩 (http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다.
자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다. 
제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다.

또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(Grid) 레이아웃을 지원하기 때문에 반응형 웹사이트를 제작할 수 있는 미디어쿼리 작성이 쉽다는 점입니다.



커스터마이징(Customizing)


부트스트랩은 css 나 js 등 원하는 구성요소만 가저다가 사용할 수 있습니다.
선택을 한 후 맨 아래에 다운로드 버튼을 클릭하면 됩니다.


부트스트랩 사이트에서도 원하는 부분만을 구성해서 다운로드 할수도 있지만 직접 색상을 수정하는것을 미리보기하면서 설정할 수도 있습니다.
http://stylebootstrap.info/ 
http://bootswatch.com/ 


개인적으로 두가지 정도의 테마가 맘에 드는것이 있는데  http://bootswatch.com/  사이트에 가서 다운로드를 클릭하면 css 파일을 다운로드 받을수 있습니다.

 


다양한 샘플과 데모사이트도 있습니다. 커스터마이징을 하기 전에 둘러보시는것이 좋습니다.
아래는 부트스트랩에 있는 샘플페이지 입니다.
샘플 =>  http://twitter.github.com/bootstrap/examples.html 
데모 페이지 =>  https://wrapbootstrap.com/ 

데모 페이지 중에서 맘에 드는 몇가지를 추려 봤습니다.



그중에서 개인적으로  http://wrapbootstrap.com/preview/WB0LX21H9  가 미리보기 하기도 좋고 색상도 좋습니다.
아쉬운점은 배경이 맘에 안드는군요..ㅎㅎㅎㅎㅎ
여하튼 데모 페이지 에 보시면 여러 사이트가 있으니 참고하시기 바랍니다.

jQuery UI Bootstrap


사이트를 둘러보고 제작해보니 아쉬운점이 있었습니다. jquery는 부드러운 화면이동이라든가 jquery ui 에서 제공하는 아이콘이 있습니다.
부트스트랩도 아이콘을 제공하고 사용하는데요.....이런 부트스트랩의 아쉬운 부분을 jquery 를 이용해서 좀더 업그레이드시키는 노력이 있습니다.
http://addyosmani.github.com/jquery-ui-bootstrap/ 


여기서도 다운로드를 할 수 있습니다. 다운로드 받아보니 각각 분리되어 있어서 원하는 부분만 취할 수도 있습니다.
부트스트랩의 메인메뉴의 드롭다운을 보면 클릭하면 보여지고 감쳐지는데 반해 jquery에서는 부드럽게 내려오는 슬라이딩 효과를 준것 같습니다.
역시 부드러운 이동이나 jquery 의 달력등이 강점인것 같습니다.


업데이트나 기술적인 부분에 대해서는 블로그나 github에서 더 알아볼 수 있습니다.
http://addyosmani.com/blog/ 
https://github.com/addyosmani/jquery-ui-bootstrap 

WordPress Bootstrap


부트스트랩은 워드프레스에서도 적용됩니다.
무료로 부트스트랩의 테마를 사용할 수도 있고, 사이드바가 있는경우, 없는경우 모두 있고, 미디어쿼리나 옵션 등 다양하게 이용할 수 있습니다.
http://320press.com/wpbs/ 


코드나 적용방법 등 사용할 부분에 대해서 잘 알려주고 있습니다.



워드프레스를 위한 테마도 있지만 루츠 테마도 있습니다. 

 
부트스트랩을 이용해서 티스토리 스킨을 만들어 봤습니다.
지금 블로그에 적용되어 있는 하단에 탭 아코디언을 적용해봤고, 사이드바는 아예 모두 표시하는것을 전제로 아코디언으로 만들어봤습니다.


출처 - http://demun.tistory.com/2133







1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark OttoJacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.

2. 부트스트랩 다운로드

부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.

3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.

저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;

4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.

5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다.  특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;

6. 더 많은 정보들.

http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.

http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.

http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.

http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다. :)

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.

7. 국내 부트스트랩 적용된 사이트들

http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)

http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. ( https://github.com/sungchi/feed9)

8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게  꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.



출처 - http://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/







Bootstrap은 Twitter 개발자인 Mark와 Jacob에 의해 시작된 프로젝트로 현재 많은 인기를 얻고 있는 front-end 웹 개발 오픈소스 프레임워크입니다.

Mark는 Bootstrap을 아래와 같이 설명하고 있네요.

At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. “by Mark”

이번 포스트에서는  Bootstrap에 대해 간략히 소개하고 Bootstrap을 사용한 워드프레스 테마도 소개하겠습니다. 

BootStrap 소개

위에서도 언급했지만 Bootstrap은 Mark와 Jacob에 의해 트위터 내부에서 프로젝트로 시작되었습니다. 이 프로젝트는 트위터 초기 개발자들의 일관성 없는 front-end 개발(간단히 말해 우리 눈에 보이는 화면을 구성하는 개발입니다.)에서 비롯되었죠.

일관성은 팀워크에서 매우 중요한 역할을 합니다. 일관성 없이 일을 진행하면 처음에는 어떻게든 굴러가겠지만 시간이 흘러 수정과 관리가 필요할 때 어려움을 겪을 수 있죠.

예를 들어 착한 워드프레스 블로그(이하 착워블)에서는 일관성을 유지하기 위해 기본적으로 동일한 템플릿위에서 자유롭게 포스팅을 하고 있습니다. 만일 기본 템플릿이 없다면 글을 읽는 방문자들에게 혼란을 줄 수 있고 훗날 포스팅의 템플릿을 변경할 때에도 문제가 발생할 수 있겠죠.

By nerds, for nerds.

nerds는 보통 괴짜들을 일컫는 말입니다. 조금 더 직설적으로 표현하면 “찌질이”입니다. 그런데 찌질이도 두 분류가 있죠. 겉과 속이 모두 찌질한 사람들과 일반인의 눈에만 찌질하게 보이나 개발이나 특정 분야에 있어서는 타의 추종을 불허하는 사람들입니다. 여기서는 후자를 의미하겠죠.

워드프레스용 트위터 Bootstrap 테마 10선
Bootstrap은 오픈소스로 현재 GitHub(많은 nerds가 서식(?)하는 곳입니다.)에서 지속적인 개발을 진행하고 있습니다. 혼자하는 것이 아니라 여러 사람들이 개발에 동참하고 있기 때문에 발전 속도 및 가능성이 매우 높죠.

Made for everyone.

Bootstrap은 크로스브라우징이 가능하기 때문에 웹사이트 제작시 브라우져에 따라 다르게 반응하는 걱정을 덜 수 있습니다. 특히 웹계의 골치덩어리 인터넷 익스플로어도 7버젼까지 커버를 한다니 솔깃하네요.
워드프레스용 트위터 Bootstrap 테마 10선
이 뿐만 아니라 모든 기기(태블릿, 스마트폰 그리고 데스크탑)에서 반응형(Responsive)으로 보여질 수 있습니다.

Packed with features.

12개 열로 화면을 나눠서 자유롭게 화면 구성을 할 수 있습니다. 이는 그리드(grid)라고 불리우며 반응형 웹에서 꼭 필요한 사항이죠. 예를 들어 현재 여러분의 화면에 12개의 열로 웹을 구성했다면 스마트폰에는 1개나 2개의 열로 화면을 구성하여 어떠한 기기에서도 눈 아프지 않게 웹을 볼 수 있도록 도와주는 것입니다.
워드프레스용 트위터 Bootstrap 테마 10선
이 그리드 구성을 직접 확인해보고 싶으시면 예제 화면으로 이동하셔서 브라우져의 사이즈를 늘렸다 줄였다 해보세요. 이 뿐만 아니라 front-end 개발에 필요한 콤포넌트자바스크립트 플러그인타이포그래피폼 컨트롤, 그리고 web-based Customizer 를 제공하여 여러분이 원하는 웹을 자유롭게 만들 수 있도록 도와줍니다.

Bootstrap을 이용한 워드프레스 무료 테마

Bootstrap for WordPress by @Facens

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

StrapPress

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

WP-Bootstrap

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기

BootstrapWP

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기

Roots Theme

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

Bootstrap을 이용한 워드프레스 프리미엄 테마

CrossRoad

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

Zeitgeist

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

Grandeur

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

Popular

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

Accord

워드프레스용 트위터 Bootstrap 테마 10선
자세히 보기 | 데모 보기

마치며

Bootstrap은 많은 장점이 있습니다. 그 중에서 가장 큰 장점은 대중화가 되어간다는 것이죠. 웹에는 다양한 front-end 프레임워크가 존재하지만 대중화가 안된다면 업그레이드가 느려지고 시간이 흘러 사장될 가능성이 높아지기 때문입니다. 이는 워드프레스도 마찬가지죠. 세상에 많은 CMS툴이 있지만 그 중에서 가장 대중화가 되었기에 지속적인 발전 가능성이 보이는 것이죠.

Bootstrap의 인기 이면에는 기술적인 부분과 함께 Twitter라는 백그라운드도 한 몫을 했다고 생각합니다. 인기가 높아지는 만큼 Twitter에서도 꾸준히 마케팅 등에 지원을 하겠죠.

워드프레스 커뮤니티에서는 웹에서 소위 뜬다! 싶은 것들은 바로 바로 테마나 플러그인으로 만들어 주기 때문에 사용자들은 어떤 플랫폼이든 쉽게 접해볼 수 있는 장점이 있습니다. 여러분도 Bootstrap에 관심이 있다면 워드프레스 Bootstrap 테마를 사용해보세요.

그럼 오늘도 즐거운 블로깅 하세요!



출처 - http://www.hwangc.com/wordpress-twitter-bootstrap-themes-10/












Posted by linuxism
,