본문 바로가기 주메뉴 바로가기
22대 대한민국 국회 국회정보길라잡이 국회의원검색
회원가입 로그인
HOME

정보검색

소장정보 검색

국회도서관 홈으로 정보검색 소장정보 검색

결과 내 검색

동의어 포함

고급검색

인명/단체명

저자정보 상세정보
인명/단체명을 입력하세요.

키워드

  • 대표어

  • 외국어

-

목차보기

표제지

목차

국문요약 15

제1장 서론 16

1.1. 연구배경 및 목적 16

1.2. 논문구성 및 연구방법 18

제2장 관련연구 20

2.1. 타 프로그램의 극좌표계 텍스트 배치 사양 20

2.1.1. 자바스크립트 라이브러리 20

2.1.2. 그래픽 편집 소프트웨어 23

2.1.3. 오피스 프로그램 28

2.2. CSS3 사양 확장 관련 연구 30

2.2.1. Robust Vertical Text Layout 30

2.2.2. CSS Extensions for a Round Display 31

2.3. 텍스트 관련 CSS3 모듈 32

2.3.1. CSS 스타일시트 개요 32

2.3.2. CSS Text Module Level 3 34

2.3.3. CSS Writing-mode Module Level 3 35

제3장 극좌표계 텍스트 배치를 위한 확장사양 설계 36

3.1. 연구 목표 36

3.2. 극좌표계 텍스트 배치 사례 조사 및 요구사항 분석 37

3.2.1. 사례 조사 38

3.2.2. 요구사항 분석 및 정리 41

3.2.3. 개념 모델링 46

3.3. CSS3 확장 사양 설계 51

3.3.1. 부채꼴 모델 설정을 위한 CSS3 사양 확장 방법 52

3.3.2. 극좌표계 방향 설정을 위한 CSS3 사양 확장 방법 59

3.3.3. 극좌표계 타이포그래피 설정을 위한 CSS3 사양 확장 방법 63

제4장 전처리기 구현 68

4.1. 전처리기 개요 68

4.2. 전처리기의 구현 69

4.2.1. 극좌표계 요소 판단 70

4.2.2. 확장사양 설정에 따른 배치 초기값 결정 73

4.2.3. 개별 글자의 극좌표 계산 및 배치 80

4.3. 확장사양 사용예제 및 결과 86

제5장 확장 CSS3 사양의 사용성 평가 90

5.1. 평가 방법 90

5.2. 확장 CSS3 사양의 표현 범위 검증 92

5.2.1. 샘플 콘텐츠 실행을 통한 적합성 검사 92

5.2.2. 구현 가능 여부 비교·분석 96

5.3. 확장 CSS3 사양의 효율성 평가 97

5.3.1. 샘플 콘텐츠 작성 97

5.3.2. 소스코드의 토큰 수 비교·분석 103

제6장 결론 105

참고문헌 107

부록 14

[별첨 1] 극좌표계 텍스트 배치 조사 사례 111

[별첨 2] 극좌표계 텍스트 배치를 위한 CSS3 확장사양 118

ABSTRACT 147

표목차

〈표 1〉 CSS3를 구성하는 모듈의 종류와 표준화 상태 33

〈표 2〉 부채꼴 서식모델과 CSS 박스모델의 비교 47

〈표 3〉 극좌표계와 직교좌표계의 방향성 비교 48

〈표 4〉 극좌표계의 수평과 수직 49

〈표 5〉 타 프로그램의 극좌표계 텍스트 배치 사양 정리 50

〈표 6〉 확장 사양 제안 및 관련 CSS 사양 비교 51

〈표 7〉 부채꼴 모델 설정 관련 확장사양 및 기존 CSS 사양 53

〈표 8〉 display 속성에 따른 각도 선택 기준 55

〈표 9〉 직교좌표계와 극좌표계의 너비 설정 55

〈표 10〉 극좌표계 방향 설정 관련 확장사양 및 기존 CSS 사양 59

〈표 11〉 극좌표계 배열 설정 관련 확장사양 및 기존 CSS 사양 63

〈표 12〉 white-space 값에 따른 차이점 66

〈표 13〉 사용성 평가에 사용할 샘플 텍스트 91

〈표 14〉 샘플 텍스트 ① 극좌표계의 문장에 대한 작성 결과 비교 93

〈표 15〉 샘플 텍스트 ② 극좌표계의 문단에 대한 작성 결과 비교 93

〈표 16〉 샘플 텍스트 ③ 시계방향 가로쓰기-1에 대한 작성 결과 비교 94

〈표 17〉 샘플 텍스트 ④ 반시계방향 가로쓰기-1에 대한 작성 결과 비교 94

〈표 18〉 샘플 텍스트 ⑤ 시계방향 가로쓰기-2에 대한 작성 결과 비교 95

〈표 19〉 샘플 텍스트 ⑥ 반시계방향 가로쓰기-2에 대한 작성 결과 비교 95

〈표 20〉 샘플 텍스트 ⑦ 서로 다른 좌표계에 대한 작성 결과 비교 96

〈표 21〉 샘플 텍스트 ⑧ 타이포그래피 적용에 대한 작성 결과 비교 96

〈표 22〉 샘플 텍스트의 구현 가능 여부 비교표 97

〈표 23〉 샘플 텍스트 ① 극좌표계의 문장 작성 소스코드 비교 98

〈표 24〉 샘플 텍스트 ② 극좌표계의 문단 작성 소스코드 비교 98

〈표 25〉 샘플 텍스트 ③ 시계방향 가로쓰기-1 작성 소스코드 비교 99

〈표 26〉 샘플 텍스트 ④ 반시계방향 가로쓰기-1 작성 소스코드 비교 100

〈표 27〉 샘플 텍스트 ⑦ 서로 다른 좌표계 예제 작성 소스코드 비교 101

〈표 28〉 샘플 텍스트 ⑧ 타이포그래피 적용 예제 작성 소스코드 비교 102

그림목차

[그림 1] 사각형과 원형 디스플레이에 대한 선호도... 16

[그림 2] 정보의 원형 배치 시 장점 16

[그림 3] CSS만 사용한 극좌표계 텍스트 배치 코드의 양 18

[그림 4] SVG를 사용한 원 작성 코드 예시 18

[그림 5] ArcText 예시 및 설정사양 21

[그림 6] ArcText 사용 예제 21

[그림 7] CssWarp 웹 서비스 화면 및 설정사양 22

[그림 8] SVG의 곡선 위 텍스트 배치 22

[그림 9] SVG를 활용한 극좌표계 텍스트 배치 작성 코드 23

[그림 10] 포토샵의 텍스트 변형 메뉴 및 텍스트 왜곡 현상 24

[그림 11] 포토샵에서의 곡선 위 텍스트 배치 방법 25

[그림 12] 일러스트레이터의 극좌표 배치 관련 옵션 25

[그림 13] 일러스트레이터의 극좌표계 텍스트 배치 방법 26

[그림 14] Text on a Circle Visio Shape의 극좌표계 텍스트 배치 사양 27

[그림 15] Text on a Circle Visio Shape의 극좌표계 텍스트 배치 범위 27

[그림 16] 한글 2010의 글맵시 설정 28

[그림 17] 한글 2010의 극좌표계 텍스트 배치 예시 29

[그림 18] 파워포인트의 텍스트 변환 메뉴 29

[그림 19] 파워포인트를 사용한 극좌표계 텍스트 문단 작성 예시 29

[그림 20] Robust Vertical Text Layout의 확장사양 설계 과정 30

[그림 21] 극좌표계 레이아웃 관련 속성 사용 예시 31

[그림 22] CSS의 다양한 레벨 32

[그림 23] CSS Text Module Level 3의 사양들 34

[그림 24] CSS Writing-mode Module Level 3의 사양들 35

[그림 25] 본 연구의 목표 37

[그림 26] 문장 배치 사례 38

[그림 27] 문단 배치 사례 38

[그림 28] 수평 텍스트에서 글자 오리엔테이션에... 39

[그림 29] 수직 텍스트의 배치와 진행 방향 사례 39

[그림 30] 수직텍스트에서의 글자 오리엔테이션 변화 사례 39

[그림 31] 같은 영역 내 서로 다른 좌표계의 텍스트 배치 사례 40

[그림 32] 사용자 가독성을 고려한 사례 40

[그림 33] 문장 및 문단 배치 샘플 41

[그림 34] 여러 방향의 텍스트 배치 샘플 42

[그림 35] 수직 텍스트 배치 샘플 43

[그림 36] 같은 영역 내 서로 다른 좌표계의... 44

[그림 37] 텍스트 진행 방향의 중력 방향 설정 샘플 44

[그림 38] 타이포그래피 관련 속성 적용 샘플 45

[그림 39] 극좌표계 텍스트 배치를... 50

[그림 40] 극좌표계 기본 정보 : 부채꼴 모델 52

[그림 41] 직교좌표계에서 display 속성의 inline과 block 설정 결과 54

[그림 42] 극좌표계의 display 설정에 따른 각도 사용 기준 54

[그림 43] CSS에서 각도의 진행 방식 56

[그림 44] -fan-angle 도안 57

[그림 45] position 속성값에 따른 배치 방법 58

[그림 46] 직교좌표계와 극좌표계에서 위치 지정 기준점의 차이 58

[그림 47] 극좌표계 기본 정보 : 방향 59

[그림 48] 직교좌표계와 극좌표계의 세로쓰기 문장방향 60

[그림 49] 직교좌표계와 극좌표계의 가로쓰기 문단방향 61

[그림 50] 직교좌표계의 글자 오리엔테이션 설정값 62

[그림 51] (a) 직교좌표계의 upright (b) 극좌표계 가로쓰기의 upright... 62

[그림 52] 극좌표계 기본 정보 : 타이포그래피 63

[그림 53] 기존 text-indent의 사용 예제 64

[그림 54] 기존 들여쓰기와 확장 들여쓰기의 적용 방법 65

[그림 55] white-space 값에 따른 차이점 예시 66

[그림 56] vertical-align 속성 예제 67

[그림 57] 사용자 작성 HTML 파일에 포함할 〈script〉 태그 68

[그림 58] 시스템 구성도 69

[그림 59] 전처리기의 처리 과정 70

[그림 60] display 사양값을 통한 극좌표계 요소 판단(main.js) 71

[그림 61] display 사양값을 통한 극좌표계 요소 판단(read.js) 71

[그림 62] 확장속성 설정값들을 저장할 객체의 스키마 72

[그림 63] 확장사양 저장 객체의 전달(main.js) 72

[그림 64] polar.js에 보낼 확장속성 설정값 객체 생성 과정 73

[그림 65] 각도의 범위에 따른 처리 73

[그림 66] 각도의 단위 변환 방법 74

[그림 67] 각도 축 회전 74

[그림 68] -fan-radius: auto일 때 최종 반지름 계산 방법 75

[그림 69] -fan-radius: auto의 반지름 계산 과정 75

[그림 70] 들여쓰기 배치 방법 76

[그림 71] 극좌표계의 정렬 과정 77

[그림 72] 연속된 공백의 처리 과정 78

[그림 73] 노드의 textContent와 개행 위치 78

[그림 74] 글자의 baseline 값 79

[그림 75] -fan-vertical-align의... 79

[그림 76] direction이 ccw일 때 글자 오리엔테이션 변환 예시 79

[그림 77] 브라우저의 (0, 0)에 배치된 텍스트 80

[그림 78] 요소 내 모든 글자의 노드화 81

[그림 79] white-space 속성의 값에 따라 달라지는 공백 처리 82

[그림 80] 글자의 각도 계산 82

[그림 81] 호길이 계산 83

[그림 82] 글자의 직교좌표 계산 83

[그림 83] 글자의 이동변환 84

[그림 84] 글자의 좌상단점 계산 84

[그림 85] CSS 사양을 이용한 이동 변환 85

[그림 86] CSS 사양을 이용한 회전 기준 설정 85

[그림 87] 회전각도 계산 및 CSS 사양을 이용한 글자의 회전 86

[그림 88] 확장사양 사용예제 : HTML 작성 방법 87

[그림 89] 확장사양 사용예제 : HTML에 링크된 CSS 파일 작성 방법 88

[그림 90] 확장사양 사용예제의 실행 결과 89

[그림 91] JS 라이브러리와 확장 CSS3 사양의 토큰 수 비교 결과 104

초록보기

 우리는 주변의 로고, 포스터, 접시 등에서 글자를 원형에 맞추어 배치한 사례를 종종 볼 수 있다. 또한, 최근 스마트워치 등 원형 기기들이 출시되고, 빅데이터 시대의 도래로 데이터 시각화 분야가 주목받으면서 글자의 원형 배치에 대한 요구가 증가하고 있다. 하지만 웹에서는 글자를 원형 또는 부채꼴로 배치하는 방법을 따로 지원하지 않아 작성하기에 복잡하며, 현재까지 표현 가능한 범위가 제한적이다. 이에 따라 웹상에서 글자를 원형 또는 부채꼴에 맞추어 배치하는 모든 경우를 지원하고, 기존의 방법보다 더 간결하고 효율적으로 작성할 수 있는 방법을 제공할 필요가 있다.

본 연구는 브라우저 기반의 웹 환경에서 CSS 스타일시트와 HTML로 표현되어 있는 웹페이지 내의 글자를 원이나 부채꼴의 중심을 기준으로 하는 극좌표계로 배치할 수 있도록 CSS3 사양을 확장한다. 또한, 확장 CSS3 사양으로 작성한 콘텐츠가 기존 브라우저에서 표현될 수 있도록 전처리기를 구현한다. 그 후, 본 연구에서 제안한 방법을 사용하면 웹상에서 글자를 극좌표계로 표현하는 데 제한이 없으며, 간결한 방법을 통해 효율적으로 작성할 수 있음을 증명하기 위해 문서 작성 프로그램인 파워포인트와 글자의 원형 배치를 지원하는 자바스크립트 라이브러리인 CssWarp.js로 동일한 샘플 콘텐츠를 작성하여 결과를 비교·분석하였다.

본 연구에서 제안한 확장 CSS3 사양이 표준 모듈로 채택될 것을 기대해본다. W3C 표준이 된다면 사용자는 특정 라이브러리를 찾아다니거나 복잡한 코드를 작성하는 데 시간을 낭비할 필요가 없다. 마지막으로, 본 연구가 직교좌표계를 가정하는 웹에서 극좌표계의 패러다임을 열 수 있는 기점이 되었으면 한다.

추천서가 (다양한 추천 자료를 만나보세요)

권호기사보기

권호기사 목록 테이블로 기사명, 저자명, 페이지, 원문, 기사목차 순으로 되어있습니다.
기사명 저자명 페이지 원문 기사목차

권호

기사명 원문보기 기사목차
닫기