웹퍼블리셔를 위한 기본 배경정보(2)

※ 아래 내용은 개인적인 기록목적으로 정리해둔 내용이고, 정보의 출처를 일일히 확인하지 못하였습니다.

 

[시멘틱태그]

-시멘틱: 의미론적인(HTML5 태그의 가장 큰 변화 중 하나)

검색엔진이나 그 이외의 기계적인 동작들이 웹페이지를 쉽게 이해할 수 있게 하는데 의미가 있음

 

[aside 의미, 사용처]

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.

 

aside 태그는 주요한 내용이 아니라 부차적인  내용을 담는 태그.

aside 태그는, article요소 안쪽 또는 바깥쪽에 올수 있는데, 안쪽의 있을 경우는 article본문 내용과 관련이 있는 내용일때이고, article요소 바깥쪽에 있을때는 전체 웹페이지와 관련 있는 내용일 경우이다.

양쪽 사이드바 등을 표시하거나 본문 이외의 내용을 담을 때 사용한다.

 

[article, section 차이]

article의 경우는 section과 다르게 독립적으로 사용될 수 있어야 한다. 그래서 독립적으로 따로 떼어놔도 완전한 문서나 섹션이 될 수 있는 재사용이 가능하고 배포가 가능한 본문 영역이다. 때문에 article 안에 heading 요소(h요소)를 넣어주는 것이 좋다.

section은 article 보다는 조금 넓은 개념으로 일종의 영역이라고 생각할 수 있다.그래서 서로 관계가 있는 내용, 문서를 분리하는 역할을 한다.

 

[CSS Sprite 기법]

CSS Sprite 기법은 background-image를 사용할때 그 해당 image들을 따로 사용하는 것이 아닌 하나의 image 파일로 만들어 사용하는 것을 말한다.

이 기법의 장점은 여러개의 background-image를 불러올 때 그만큼 서버에 요청 횟수가 늘어나고 그만큼 로딩 속도가 길어지는데 이것을 하나의 background-image로 사용하기 때문에 서버 요청 횟수가 줄면서 로딩속도가 빨라진다는 장점이 있다.

이 기법의 단점같은 경우는 여러 image가 하나의 파일로 묶여있고 background-position을 사용해 이미지의 위치값을 잡는 것이기 때문에, 원하는 image를 사용하기 위해 각 image의 위치값을 알아야 하고, image가 많을수록 그 작업이 복잡해진다.

 

[longdesc]

흔히 웹접근성을 위해 사용하는 방법이다.

이미지에 대한 설명이 alt나 title로 다 담지 못할 만큼 너무 길 경우 longdesc를 사용 할 수 있다. alt나 title처럼 longdesc도 하나의 속성인데, alt나 title로 담지 못할만큼의 긴 text 내용을 html문서로 저장하고 longdesc를 이용해서 연결할 수 있다.그런데 스크린리더기에 따라 호환의 불안정성이 있다는 단점이 있다.

 

[alt, title 차이점]

alt(alternative text)는 image를 설명할 수 있는 대체 텍스트이다. 그래서 예를들어 웹브라우저에서 해당 image가 깨졌을때 그 image가 어떤 image인지 설명할 수 있는 대체 텍스트를 의미하는 것이다.

그리고 title은 말 그대로 제목이라고 생각하면 된다. 그 해당 이미지의 제목을 나타내는 것이다. 그래서 해당 image의 추가적인 정보를 제공한다고 볼 수 있다. alt와 차이점에 있어서는 title 속성을 넣게 되면 title 속성을 가지고있는 요소에 마우스를 올렸을때 text box가 뜨고 그 text box 안에 title 속성값이 표시되게 된다.

 

[text-size-adjust]

text-size-adjust는 디바이스 화면 폭에 맞게 텍스트 크기를 조절하는 것인데,

-webkit-text-size-adjust:none을 사용하면 safari에서 이 기능을 방지하는 것이다.

즉 safari를 가지고 있는 아이폰에서 text-size-adjust 기능을 막는 용도라고 볼 수 있다.

 

[브라우저 리플로우]

브라우저 리플로우 현상은 문서 내 요소들의 (DOM 요소들을) 레이아웃 포지션을 다시 계산하여 로딩시키는 과정을 말한다. 그리고 이 현상은 특정 요소의 스타일 변화가 발생하거나, 특정 객체가 가진 자식요소의 레이아웃 재정리를 위해 브라우저 리플로우 현상이 발생할 수 있다.  쉽게 말해 CSS나 JAVASCRIPT를 이용한 DOM구조의 수정, 변화 가운데 이 현상이 발생할 수 있는 것이다. 이 현상이 일어나면 불필요한 퍼포먼스 저하가 일어나기 때문에 브라우저 리플로우 현상을 최소화 할 필요가있다. 

 

[이미지포맷]

*JPG

:손실 압축 방식이다. 원본에 손상을 가해 이미지 용량을 줄이는 방법이다. 때문에 압축률을 높이거나 새로 저장할수록 이미지 품질이 떨어진다. 트루컬러(24비트)색상을 지원하여 약 160만개의 색들을 표현할 수 있다.그래서 사진과 같이 다양한 색과 명도를 가진 이미지 용량을 줄이는 데 가장 높은 효율을 보여준다. 투명도와 애니메이션을 지원하지 않는다.

*GIF

:비손실 압축 방식이다. 비손실 압축이지만 하나의 이미지에 저장 가능한 색상이 256 색으로 제한되어 있다. 단색 투명층을 통해 투명 이미지를 지원하고 애니메이션을 지원한다

*PNG

:비손실 압축 방식이다.

 기본적으로 PNG포맷은 투명도 있는 이미지를 저장할때 사용된다. 

*PNG-8

:지원하는 색이 256색으로 한계가 있다. 투명도의 경우 완전투명하거나 불투명한 두가지 단계만 지원한다(단색 투명층), 이미지 압축 손실이 일어난다.

*PNG-24

:트루컬러(24비트)를 지원한다. 여러 투명도를 모두 지원한다(투명, 반투명, 불투명), 이미지 압축손실이 일어나지 않는다

 

[형상관리도구]

*주 사용 도구: SVN(Apache Subversion), CVS(Concurrent Versions system), git

*형상관리도구

:소프트웨어 개발 및 유지보수를 하는 과정에서 발생하는 코드, 문서, 인터페이스등 여러 결과물에 대해 형상을 만들고 이를 체계적으로 관리 및 제어할 수 있도록 하는 도구가 형상관리도구이다.

여러 개발자가 한 프로젝트에서 동일한 기능을 동시에 개발할 때, 작성된 코드의 변경사항을 확인하고 수정함에 있어 협업할 수 있게 도와줄 수 있다.

 

[Flexible box 레이아웃]

CSS3에서 처음 소개된 레이아웃 모델이다. 그리고 이 레이아웃은 서로 다른 크기의 화면과 기기에서도(다양한 디바이스에서도) HTML 요소들이 자동적으로 재정렬되어 웹페이지의 레이아웃을 언제나 동일하게 유지시킬 수 있는 module을 말하는 것이다.

 

[프레임워크, 라이브러리 차이]

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가이다.

라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있다.

반면, 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재한다.

프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점이다.

 

라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다. 

단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.

 

프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.

보통 프레임워크 위에 개발한 클래스를 등록해두고, 프레임워크가 흐름을 주도하는 중에 개발자가 만든 애플리케이션 코드를 사용하도록 만드는 방식이다.

 

[버전관리시스템(VCS / Version Control System)]

버전 관리 소프트웨어. 복수의 이용자가 네트워크를 사용해서 소프트웨어를 개발하거나 문서를 작성하는 경우 파일 내용은 빈번히 변화하게 되는데, 버전 관리 시스템은 변경된 이력(履歷)을 파일마다 관리할 수 있으며, 동시에 여러 사람이 파일을 열 수 없도록 잠그는 기능을 지니고 있다.

 

파일 변화를 시간에 따라 기록했다가 이후에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 동일한 정보에 대한 여러 버전을 관리하게 되며, 버전을 통해 시간적으로 변경 사항과 변경 사항을 작성한 작업자를 추적할 수 있다. 

 

버전 관리 시스템은 파일의 변화를 시간에 따라 기록하여 과거 특정 시점의 버전을 다시 불러올 수 있는 시스템이다

 

[UX(User Experience), UI(User Interface)]

UX : how they feel while they do(emotional), 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하게 되는 경험들을 총체적으로 설계하는 것

UI : what people use to interact with the product(technical), 사용자가 제품을 어떤 방식으로 이용하도록 만드느냐

 

ex) 자전거..

UX : 자전거의 사용감, 자전거의 안장이 편리한지, 핸들을 돌릴때 잘 돌아가는 지 등..

UI : 핸들, 안장, 페달 등...사용자가 자전거를 활용하기 위해 사용하는 장치들