2021-02-26

210226 HTML/CSS TIL - 개발자로서의 또 다른 목표, 레이아웃 설계 방법 및 순서, 자손 선택자와 자식 선택자, inline element의 bottom gap, line-height에 대한 이해, 설득의 심리

HTML/CSS 다섯번째 수업

오늘은 HTML/CSS 다섯번째 수업날이었다. 오늘은 강사님의 열정적인 수업으로 많은 양의 유익한 내용들을 배울 수 있었다. 노트필기를 보니 아직도 강사님의 설명과 재미있는 에피소드가 생각난다.

접근성을 고려해서 레이아웃을 작성하지 않으면 불편함을 느끼는 개발자가 되자.

이번 강사님의 수업을 통해 기존에 바라보았던 화면 레이아웃의 시각이 많이 바뀌었다. 이전에는 어떻게 빠르고 효율적으로 화면을 디자인하면 좋을지 시각적인 부분만 생각하고 레이아웃을 바라봤다면, 이제는 접근성과 콘텐츠의 흐름 그리고 사용성을 생각해서 레이아웃을 작성해야겠다는 생각을 했다.

이번에 자료실 및 공지사항 레이아웃을 작성하면서 느꼈던 점은 생각만큼 쉽지 않고, 생각보다 생각해야될 요소들이 많다는 것이다. 아마 기존에는 이러한 생각들을 해보지 않아서 그런 것 같다. 그렇지만 이러한 연습을 꾸준히 하고 레이아웃을 작성한다면 이것이 습관으로 잡혀서, 접근성을 고려해서 레이아웃을 작성하지 않으면 불편함을 느끼는 개발자가 될 수 있을 거라고 생각한다. 그래서 이제부터 레이아웃을 작성할때에는 각 각의 태그의 의미와 접근성을 고려해서 작성해보도록 하겠다.
5일간 김데레사 강사님의 수업을 들으면서 또 다른 목표가 더 생겼다. 그것은 웹 표준과 접근성을 고려해서 개발할 줄 아는 그런 개발자가 되는 것이다.

용어설명 레이아웃 부분 설계 및 구현 (과제) 점검

내가 작성했던 코드와 강사님이 작성하신 코드를 비교/분석하며 수업을 들었다.
아래의 내용은 레이아웃을 작성하면서 강사님께서 강조하신 내용들이다.

https://leehyungi0622.github.io/2021/02/26/202102/210226-html_css_layout_practice/

내가 작성한 코드와 비교/분석하기

그라디언트가 적용이 안될 경우를 고려해서 default color를 앞에 지정해주자
chrome 개발자 툴을 이용해서 agent style을 확인하고 제거하자
실무에서 유지보수를 생각해서 CSS 스타일링에서 단축표기법을 주로 사용하자
레이아웃에 있는 각 요소들의 영역을 확인하기 위해서 배경색상을 넣고 확인하자
태그보다는 class 명으로 접근을 하자
위의 내용은 다시 한 번 remind하면서 HTML/CSS를 사용해서 레이아웃을 작성하도록 하자

자손 선택자(descendant selector)와 자식 선택자(child selector)의 사용

자손 선택자(descendant selector)와 자식 선택자(child selector)의 사용에 대해서 정리한다.

우선 자손 선택자는 A B{속성:속성값}문법의 형태로 사용한다. 자손은 자식, 손자, 그리고 그 이후의 후손을 모두 포함한다.
A와 B 사이를 공백으로 분리하고, A요소 내에 있는 모든 B요소를 선택해서 스타일을 적용한다.

다음으로 자식 선택자는 A>B{속성:속성값}문법의 형태로 사용한다. 자식 선택자는 특정 요소의 직계 자식만 선택하는 선택자이다. 자식 이후의 손자, 후손들은 포함하지 않는다.
사용의 예로 div>p{color:blue;}를 해주게 되면, div 태그 내에 있는 직계 자식 p만 파란색으로 색상 스타일을 바꿔준다.

inline element인 <img>의 하단에 작은 gap이 발생하는 경우

inline element인 <img> 태그를 사용해서 이미지를 삽입하는 경우, 하단에 약간의 gap이 생기는 현상이 발생한다.

왼쪽 이미지는 dd 태그 내부에 img 태그가 삽입된 형태이다. 이미지의 하단을 보면 약간의 갭이 발생한 것을 확인할 수 있는데, 내부의 img 태그는 inline element이기 때문에 block element의 내부에서 약간이 갭이 발생하게 된 것이다.

그럼 해결방법은?
해결방법은 내부의 img 태그에 vertical-align: top을 주거나 display: block로 inline element의 성격을 가진 img 태그를 block의 성격을 갖도록 만들어 주는 것이다. img태그가 block 성격을 갖도록 만들어주는 해결법은 단일 이미지의 경우에는 괜찮지만 연속적으로 이미지를 나열해서 출력하는 경우에는 사용되어서는 안되기때문에 레이아웃에 맞게 해결법을 적용하면 된다.

line-height 이해하기

line-height는 줄 높이를 정하는 속성으로, 속성값으로는 normal, length, number, percentage, initial, inherit이 있다.
글자 크기가 40px일 때 line-height의 값을 1.5로 주게 되면, 줄 높이는 글자 크기인 40px의 1.5배인 60px로 잡히게 됩니다.
줄 높이가 60px인데 글자의 크기는 40px이기 때문에 글자의 위 아래로 각 각 10px의 여백이 생기게 된다.
가독성 측면에서 글자크기의 1.5배의 line-height가 가장 좋다. 두 번째 노트필기의 우측 상단의 그림과 같이 글자의 배치는 top, middle, base, bottom을 기준으로 배치가 된다.

문단의 좌우 정렬 맞추기

장문의 설명글을 포함한 컨텐츠를 보면 좌우가 정렬되지 않은 형태로 출력되는 경우가 있다. 그런 경우에는 text-align: justify로 CSS 스타일을 주면 된다.

상대를 설득하는 능력을 키우자. (feat. 설득의 심리학)

개발자로 일을 하게 되면, 디자이너, 기획자, 고객사등 다양한 직업군의 사람들과 함께 협업을 하면서 일을 하게 된다. 각자 자신의 직업에 대한 확고한 직업관이 있고, 고집이 있다.
그렇기 때문에 같이 협업을 하게 되면, 개발에 대한 배경지식이 없는 다른 직업군의 사람과 대화를 하면서 이해관계가 충돌하는 경우가 생긴다.
때로는 요구사항에 최대한 맞춰서 조율을 할 수도 있겠지만, 그것이 힘든 경우에는 상대를 설득하는 능력이 필요하다. 이러한 부분에 대해서 강사님께서 수업시간에 말씀해주셨다. 그래서 시간이 되면 추천해주신 설득의 심리학이라는 책을 읽어보려고 한다.

clear를 사용해서 float를 해제시킬때에는 직계 부모 요소에서 해주는 것이 좋다.

중첩된 형태의 레이아웃 구성의 내부에서 float를 사용해서 레이아웃 배치를 하는 경우, 어디에서 float를 해제시켜주는 것이 좋은 것인지 고민이었는데, 강사님이 이번 과제를 풀이해주시면서 float로 레이아웃을 배치한 요소들의 바로 위 직계 부모 요소에서 clear를 사용해서 float를 해제시켜주는 것이 좋다고 하셨다.

text-align & vertical-align

보통 text-align과 vertical-align을 서로 반대의 개념으로 알고 있지만 그렇지 않다. 두 번째 노트필기의 우측 하단부를 보면 그림을 그려놓았는데, text-align은 좌측에서 우측방향으로 inline 요소들을 배치시키는 반면에, vertical-align의 경우에는 개별 inline요소를 배치할때 사용된다.

검색 폼 레이아웃

검색 폼 레이아웃 관련 wireframe은 아래 첨부한 3번째 노트를 확인하도록 하자. 레이아웃을 잡을때 첫 번째 우선적으로 해야되는 것은 레이아웃에 표시되는 정보의 논리적 흐름을 파악하는 것이다.

HTML5에 다양한 기능들의 태그가 추가되었다.

HTML5에서 다양한 기능들의 태그가 추가되었다. 예를들어 날짜정보를 입력할때 사용되는 <time>태그가 있다. 날짜 정보를 넣을때 단순히 텍스트로써 처리하기보다는 해당 정보가 날짜정보를 가르키는 정보라는 것을 기계에서 알려줄 수 있도록 작성을 하는 것이 좋다.

HTML을 디자인적 관점이 아닌 기계의 관점에서 컨텐츠의 흐름을 중점으로 파악해야 한다.

이번 수업에서 가장 핵심이 되는 내용이 아니었나 싶다.
이번 수업에서 공지사항 및 자료실 부분의 레이아웃을 작성하고 강사님께서 돌아다니시면서 개개인마다 간단한 피드백을 주셨었다. 그 피드백 중에서 가장 기억에 남는 내용이 레이아웃을 디자인적인 관점에서 접근하지 말아라라는 말씀이었다. 그렇다. 나는 나름 접근성을 고려해서 디자인해봐야겠다고 생각은 했지만 막상 레이아웃을 디자인하다보니 어느새 화면에 보여지는 실제 레이아웃의 모양에 치중해서 레이아웃을 작성하고 있었다.
이제는 기계의 관점에서 컨텐츠의 논리적 흐름에 중점을 맞춰 레이아웃을 바라보는 습관을 들여야 겠다고 느꼈다.
하지만 기계적인 관점에서 레이아웃을 짜게 되면, 사용성에 문제가 생긴다. 구체적인 이해를 위해서 아래 첨부한 노트중에 6번째 노트필기를 참고하자. 필기한 내용에는 공지사항 및 자료실 레이아웃에 대한 1안, 2안, 3안이 있다.
1안은 공지사항과 자료실을 <section>태그로 각 각 분류하였다. 그리고 2안은 리스트 태그로 공지사항과 자료실에 표시되는 내용들을 각 각의 하위 메뉴로써 분류하여 작성을 하였다. 3안은 탭에 대한 메뉴는 리스트 태그로 처리를 하고, 각 컨텐츠 내용(공지사항 및 자료실)은 별도의 section으로 분류하여 작성하였다.

이러한 웹의 접근성에 대한 연구를 하는 모임에서 운영하는 GitHub가 있는데, 아래 주소를 첨부한다. ARIA 레포지토리에 다양한 화면의 요소들을 어떤식으로 접근성 좋게 처리할 수 있는지 다양한 예제코드들을 확인할 수 있다. 과거에 작성된 코드이기 때문에 js코드가 jQuery 코드로 작성이 되어있지만, 코드의 내용을 보고 vanillaJS로 작성해서 사용해보면 좋을 것 같다.

https://github.com/niawa/ARIA

수업시간에 실습으로 제공되었던 페이지에 Tab 관련 내용이 있었기 때문에 01.tab-ui의 예제코드를 살펴보자.
→ 01.tab-ui/index.html 파일의 13번째 라인에서 시작하는 column-01 div태그(WAI-ARIA 미 적용 부분)와 column-02 div태그(WAI-ARIA 적용 부분)의 코드를 살펴보자.

li 태그로 탭 메뉴를 구성한 경우에는 해당 리스트의 역할이 “tab”이라는 것을 명시(ARIA의 role 속성 사용)해주고, 각 탭이 어떤 부분과 연결되어 있는지 aria-controls라는 속성값을 이용해서 section태그의 id로 mapping시켜주면 된다.

<!-- Tab -->
<ul class="tab-list" role="tablist">
  <li
    id="tab1"
    role="tab"
    aria-controls="section1"
    aria-selected="true"
    tabindex="0"
  >
    HTML
  </li>
  ........
  <!-- Tab contents -->
  <div class="tab-contents">
    <section id="section1" role="tabpanel" aria-labelledby="tab1">
      <p>
        HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language) 라는 의미의
        웹 페이지를 위한 마크업 언어이다.
      </p>
    </section>
  </div>
</ul>

위의 코드를 살펴보면서, 대한항공과 아시아나 항공의 홈페이지에서 탭으로 메뉴의 이동을 살펴보고, 어떠한 차이점이 있는지 관찰해보도록 하자.

강사님이 제공해주신 Figma 디자인 시안으로 접근성을 고려한 레이아웃을 디자인해보자.

이번에 3.1절로 인해 주말 포함해서 3일 연속으로 쉬게 되었다. 그래서 강사님께서 반응형 레이아웃을 연습할 수 있는 Figma 디자인 시안을 주셨다. 디자인 시안은 네이버 로그인 화면으로, 개인 GitHub에 repository를 만들어서 과제를 하면, 강사님께서 개인적으로 피드백을 주신다고 하셨다.
간단해보이는 UI이지만, 다각도로 생각하고 구상해서 과제를 진행해봐야겠다.

Figma의 사용법에 대한 구체적인 사용법은 강사님이 추천해주신 유튜브 채널의 영상을 보고 개별적으로 공부해보도록 하자.
(개발자의 입장에서 Figma 사용법을 익히는 것을 목표로 한다)

https://www.youtube.com/channel/UCTZRL_OwTjiXYoTjwWg4bww

vector 이미지(svg)를 사용해서 화면에 이미지를 배치하면 화면의 크기가 달라져도 이미지의 해상도를 유지해준다.

레이아웃을 작성할때에는 컨텐츠의 논리적 흐름을 나타내는 구조와 레이아웃 배치구조도를 나눠서 그려보도록 하자.

아래에 첨부한 노트의 마지막 페이지를 살펴보도록 하자. 왼쪽 하단에는 화면에 배치할 각 태그를 컨텐츠의 논리적 순서에 맞게 작성을 하였다. 이 논리적 순서는 기계의 관점에서 화면의 컨텐츠를 탐색할때 이렇게 탐색할 것이라고 가정한 순서이다. 그래서 공지사항 및 자료실 컨텐츠에서 공지사항 관련 컨텐츠를 스캔할때에는 공지사항 탭 메뉴→항목 리스트→더보기 버튼 순으로 스캔되기 때문에 이런식으로 각 탭 항목을 배치하였다.
단순히 화면에 보이는 레이아웃만 본다면 이러한 배치는 생각할 수 없지만, 기계적 관점에서 컨텐츠를 바라본다면 이러한 화면 배치가 나온다. 이렇게 작성을 해준다면, 개발측면에서 어려워진다. 하지만 이러한 컨텐츠적 측면에서 논리적 순서를 고려해서 개발을 하게 된다면, 접근성 측면에서 매우 좋은 레이아웃이 된다.
그리고 오른쪽 상단에는 각 각의 화면 구성요소를 어떤 position 방식으로 어떻게 배치를 할지 작성을 해주었다.
탭 메뉴의 position을 absolute로 주고 top, left값만으로 위치를 잡게 되면, 컨텐츠의 논리적 흐름에서 벗어나는 부분이 되기 때문에 왼쪽 하단의 그림에서 기존에 ul태그의 위에 배치했던 탭 메뉴관련 요소를 X로 표기하였다.
그리고 + 더보기 부분도 마찬가지로 position을 absolute로 하고 top, right 값만으로 화면에 배치하였기 때문에 이 부분도 논리적 흐름에서 벗어나기 때문에 탭 메뉴 관련 요소와 같이 X로 표기하였다.
이렇게 작성을 하고, 컨텐츠의 논리적 순서도를 보면 딱 공지사항 관련 컨텐츠 항목 리스트와 자료실 관련 컨텐츠 항목 리스트만 논리적 순서도에 남게 된다. 이렇게 된 상태에서 선택된 탭 메뉴에 따라 각 각의 항목을 display: block;, display: none;로 처리를 해주게 되면, screen reader는 화면에 보여지는 컨텐츠의 리스트 항목을 읽어주게 된다.
공지사항과 자료실 컨텐츠 항목 리스트와 더보기 버튼의 경우, 서로 겹쳐져 있기 때문에 보여지는 컨텐츠의 내용에 따라 display 속성을 사용해서 컨트롤하면 된다.
이렇게 작성을 해주고 앞서 살펴본 01.tab-ui의 예제코드에서와 같이 탭 메뉴 리스트와 각 각의 컨텐츠 리스트를 ARIA 속성을 이용해서 mapping시켜주면 화면을 탐색할때 컨텐츠의 논리적 순서에 맞게 focus가 이동할 수 있게 된다.

remind를 위해 수업시간에 필기했던 노트를 첨부한다.