웹 서버를 공부해가며 짧막한 테스트 코드를 작성했을 때 웹 브라우저에 원하는 결과가 나오지 않고 글씨가 깨져 보이는 현상은 누구라도 한 번은 겪어봤을 것이다. 이런 현상은 대부분 이클립스 인코딩 방식이 UTF-8이 아니기 때문에 발생하는 것이다. 서론에서 짧게 인코딩이란 무엇인지, UTF-8은 또 무엇인지 알아보고 설정하는 과정을 보도록 하자. 설정하는 방법만 보고자 한다면 바로 스크롤을 내리자.

 

 Encoding

 데이터를 전송할 때 암호화하는 것을 인코딩이라 한다. 반대로 데이터를 수신한 측에서 암호화 된 데이터를 부호화하는 것을 디코딩이라 한다. 웹 환경에서 송수신의 주체는 웹 브라우저와 웹 서버가 된다.

 

 MS949, EUC-KR, UTF-8

 이클립스에서 웹 개발을 할 때 사용되는 html, jsp등의 텍스트 파일은 기본적으로 "MS949"이라는 문자셋으로 인코딩되되도록 되어 있는데 여기서 MS949는 EUC-KR의 확장된 문자셋이다. EUC-KR은 UTF-8과 더불어 대표적인 한글 문자셋으로 EUC-KR은 문자당 2byte로 한글, 한국에서 통용되는 일부 한자, 영문을 표현할 수 있고, UTF-8은 1~4byte의 가변 길이를 가지며 유니코드를 표현할 수 있다. 유니코드는 전세계 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.

 

 UTF-8을 사용하는 이유

 UTF-8은 유니코드를 사용하기 때문에 전 세계 모든 언어와 호환된다는 장점이 있다. 때문에 전 세계에서 UTF-8 방식이 가장 많이 사용되고 있고 유니코드를 지원하는 프로그램의 경우 대부분 UTF-8을 사용한다.

 

 


 

 

 이클립스 UTF-8 환경으로 설정하기

 이후로 진행하는 모든 환경 설정은 [Window - Prefeerences]에서 진행한다.

 

 

 Workspace 인코딩 설정

 좌측 최상단에서 "workspace"를 입력하면 메뉴 중에 문자열이 일치하는 메뉴가 나타나는데 여기서 [General → Workspace]를 선택한다. 그리고 하단의 Text file encoding에서 Other를 선택하고 목록에서 "UTF-8"을 선택한다.

 

 

 Java, JSP 인코딩 설정

 검색창에 "content types"를 검색한다. 목록에서 [General → Content Types]를 클릭한 후 중앙의 박스에서 Java Class File을 클릭한다. 아래의 Default encoding에 "UTF-8"을 입력한 후 Update를 눌러준다.

 

 

 위 화면에서 그대로 진행한다. 중앙 박스에서 Text 카테고리를 펼쳐서 JSP를 찾아서 선택한다. Default Encoding이 "ISO-8859-1"로 되어 있는데 UTF-8로 수정한 뒤 Update를 눌러준다.

 

 

 "HTML"을 검색한 후 [Web → HTML Files]를 클릭한 후 중앙에 보이는 Encoding을 "UTF-8"로 설정한다.

 

 

 위 화면의 검색결과에서 [Web → JSP Files]를 선택한 후 Encoding을 "UTF-8"로 변경한다.

 인터넷에서 "맨 아래로"나 "맨 위로"같은 태그를 눌러 페이지 내의 스크롤을 이동하는 방법이다.

 

 텍스트를 하이퍼링크로 만들기 위해 <a href> 태그를 사용하고 해당 텍스트가 클릭되면 특정 텍스트로 이동되게 한다. 대상이 되는 텍스트는 <a> 태그를 사용하여 name 혹은 id 값을 부여하는데 이 속성이 a href가 가리키는 식별자가 된다. 이동 대상은 굳이 텍스트가 아니어도 되고 페이지 최상단이나 하단에 단독으로 삽입하고 식별자를 부여하는 것도 가능하다.

 

 

 1. 글 작성/수정 페이지에서 HTML로 모드 바꾸기

 

 

 2. 이동 대상이 되는 텍스트에 <a> 태그 삽입하기

이동 타겟이 될 텍스트 탐색
a 태그를 삽입

 id 혹은 name 값을 부여할 수 있는데 여기서는 name으로 부여한다. 필자는 "link_search"라는 name을 부여하였는데 이는 페이지 내에서 스크롤을 이동할 때 유일한 식별자가 되어야 하기 때문에 태그 중에 name 속성이 겹치는 일이 없어야 한다.

 

 

 3. 이벤트를 발생시킬 텍스트 탐색

 ctrl+f 눌러서 이벤트를 적용시킬 텍스트 탐색한다.

 

 

 4. <a href> 태그 삽입하여 하이퍼 링크 적용

 

 여기서 a href 의 값은 위에서 적용한 대상 텍스트의 name 속성이다. 앞에 붙는 #은 이 값이 name 속성이라는 것을 나타낸다.

 

 이제 "데이터 검색"이라는 텍스트는 하이퍼링크가 되었다. 클릭할 경우 a href가 가리키고 있는 name 속성의 태그를 찾아 스크를을 이동시키는 것을 볼 수 있다.

+ Recent posts