이번 프로젝트에서 알게 된 것들 - 2

HTML

• 시맨틱 태그 사용하기

시맨틱 태그를 사용하면 더욱 사용자에게 정보 전달에 용이하다. CSS로 스타일을 주지 않고 태그만 보더라도 어떤 내용을 전달하려는지 파악할 수 있다. 웹 접근성 향상에 도움을 준다.

• 선형 구조로 마크업 하기

요소의 위치가 겹치는 경우엔 position으로 요소를 띄워서 위치를 잡기 보다는 margin으로 위치값을 조정하여 겹치게 하는 것이 좋다. 화면에서 보여지는 순서 그대로 마크업 하는 것이 웹 사용성, 접근성에 더 좋다.

• 상태 변화가 있는 요소는 부모 요소에 별도의 클래스를 지정하기

상태변화가 일어나는 요소에 바로 클래스를 주는 것이 아니라 요소의 부모 요소에 클래스를 별도로 클래스를 만들고 CSS로 하위 요소를 지정해 스타일을 준다. 다른 페이지에서도 동일한 마크업을 사용할 수 있다.

• 요소 너비가 유동적으로 변할 수 있는 마크업

반응형 웹이 아니라더라도 디바이스의 해상도에 따라 페이지의 크기가 달라지기 때문에 요소의 너비가 유동적으로 변할 수 있는 마크업을 해야한다. 디바이스의 뷰포트를 고정시키면 요소의 크기들을 픽셀로 고정해도 되지만, 그렇지 않다면 vw, vh, % 등으로 크기를 설정해 디바이스의 크기가 변하면 요소의 크기도 유동적으로 변하게 하는 것이 좋다.

• button 태그와 a 태그 구분해서 쓰기

페이지 내에서 이벤트가 발생할 때는 button 태그, 링크 이동이 있을 때는 a 태그를 쓴다.
때로 button 태그에서 발생하는 효과를 주고싶지 않을 때 a 태그를 사용하기도 한다.
단, '다음'버튼은 일반적으로 a 태그가 아니라 button 태그를 사용한다. 유효성 검사가 필요하기 때문에 링크 이동이 있더라도 button 태그를 사용한다. disabled 속성을 넣어두고 필수값이 채워지면 활성화 되도록 한다.

• 파일첨부

input 태그에 type="file" 속성을 넣어주고 accept 속성을 통해 서버로 업로드할 수 있는 파일의 타입을 명시해준다.

<input type="file" accept="image/gif, image/jpeg, image/png, image/jpg">

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file

• 연결되는 label이 없는 input 요소

이런 경우 title 속성을 통해 역할을 나타낸다.

<input type="text" title="아이디 입력">

• dl, dt, dd 요소

dl 요소는 설명 목록, dt 요소는 용어를, dd 요소는 용어에 대한 설명, 정의, 값을 나타낸다. dt와 dd는 키-값의 형태이며 dl 없이 독립적으로 쓸 수 없다.
아래와 같이 쓸 수 있다.

<dl>
  <dt>용어</dt>
  <dd>용어 정의</dd>
</dl>

CSS

• 같은 클래스를 사용하는 요소들 사이에만 간격을 주고 싶을 때

선택자 사이에 + 를 사용하여 속성값을 준다.

.mod-field + .mod-field {
    margin-top: 48px;
}

• clip-path 속성

요소의 클리핑 범위를 지정한다.
transition 속성과 함께 사용하여 애니메이션 효과를 줄 수 있다.

/* 키워드 값 */
clip-path: none;

/* <clip-source> 값 */
clip-path: url(resources.svg#c1);

/* <geometry-box> 값 */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> 값 */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* 박스와 도형 값 조합 */
clip-path: padding-box circle(50px at 0 100px);

/* 전역 값 */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

• text overflow 속성

글자가 콘텐츠 범위를 초과할 때 어떻게 표시할 지 정해주는 속성

 text-overflow: clip; // 범위를 초과하는 글자를 자른다.
 text-overflow: ellipsis; // 범위를 초과하는 글자는 말줄임표(...)로 나타낸다.
 text-overflow: " [..]"; // string - 클리핑 된 문자열을 어떻게 표시할지 정해준다.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

• position: sticky 속성

요소를 문서 흐름에 따라 배치하지만, 스크롤이 동작하여 요소가 화면 밖으로 나가려 할 때 fixed처럼 화면의 지정된 위치에 고정되어 계속 화면에 보이게 만들어 준다. fixed를 사용하면 요소가 뜨게 되어 형제요소와 나란히 배치할 수 없지만, sticky를 사용하면 relative처럼 형제요소와 나란히 배치하면서도 스크롤을 내렸을 때는 fixed처럼 화면에 고정시켜 준다.

https://developer.mozilla.org/ko/docs/Web/CSS/position

• 줄바꿈시 기준 정하기

word-break과 overflow-wrap (word-wrap과 같다.)
한중일 텍스트와 영문 텍스트의 기준이 달라서 너무 헷갈리는 속성이다...
둘 다 아직 많이 헷갈려서 더 사용하면서 익숙해져야 할 것 같다.

word-break은 텍스트가 콘텐츠 영역 밖으로 넘칠 때 줄을 어떻게 바꿀 지 정한다.

word-break: normal; /* 기본 줄바꿈 규칙 */
word-break: break-all;
word-break: keep-all;
word-break: break-word;

normal : 텍스트가 넘치려고 할 때 단어 단위로 줄바꿈이 된다.
break-all : 텍스트가 넘치려고 할 때 무조건 줄바꿈이 된다. 텍스트가 넘치는 정확한 지점에서 줄을 바꾼다.
keep-all : (한중일 텍스트에서) 텍스트가 넘쳐도 공백이 없는 한 단어라면 줄바꿈이 되지 않고, 브라우저 창보다 단어 길이가 길어지면 가로 스크롤이 생긴다. 한 단어라면 무조건 한 줄로 표시된다.
break-word : overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 낸다.

overflow-wrap은 텍스트가 콘텐츠 영역 밖으로 넘치지 않게 단어 마디 안에서 줄을 바꿀 것인지 아닌지를 정할 때 사용한다.

overflow-wrap: normal; /* 기본 줄바꿈 규칙 */
overflow-wrap: break-word;

normal : 단어 사이 공백이 있을 때만 줄바꿈이 되고 공백이 없는 한 단어라면 영역 밖으로 넘쳐도 줄바꿈이 되지 않는다.
break-word : 공백이 없는 한 단어라도, 영역에서 넘친다면 단어가 영역에서 넘치는 지점에서 줄바꿈이 된다.

• 요소의 공백을 처리할 때

white-space

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

noraml : 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리. 한 줄이 넘칠 경우 자동으로 줄을 바꾼다.
nowrap : 연속 공백을 하나로 합침. 줄 바꿈은 br 요소로 가능.
pre : 연속 공백 유지. 줄 바꿈은 개행 문자와 br 요소로 가능.
pre-wrap : 연속 공백 유지. 줄 바꿈은 개행 문자와 br 요소로 가능. 한 줄이 넘칠 경우 자동으로 줄을 바꿉니다.
pre-line : 연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 br 요소로 가능. 한 줄이 넘칠 경우 자동으로 줄을 바꿉니다.

• 텍스트 말줄임을 할 때

text-overflow 콘텐츠 영역에서 텍스트가 벗어날 때 어떻게 처리할 지 지정할 수 있다.

text-overflow: clip;
text-overflow: ellipsis;

clip : 속성의 기본값. 영역 내의 한도에서 텍스트를 자른다.
ellipsis : 잘린 텍스트를 나타내는 줄임표 (…)를 표시한다.

라이브러리

• swiper

https://swiperjs.com/

슬라이더를 구현하게 해주는 라이브러리
다양한 메서드와 설정을 지원해서 사용하기 편하며 하위 브라우저에서도 문제없이 사용 가능하여 크로스브라우징 측면에서도 뛰어나다.

필수적으로 다음 순서로 클래스를 지정해 주어야 한다.
swiper-container > swiper-wrapper > swiper-slide

• ScrollTriger

https://greensock.com/scrolltrigger/

GrennSock에서 만든 스크롤 트리거 라이브러리.

//간단한 예
gsap . to ( ".box" , { 
  scrollTrigger : ".box" , // ".box"가 뷰포트에 들어갈 때 애니메이션 시작 (한 번) 
  x : 500 });  

// 고급 예
let tl = gsap.timeline({
    // 전체 타임라인에 추가
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // 활성화 상태동안 트리거 요소 고정
      start: "top top", // 트리거 요소 상단이 화면의 상단에 닿을 때
      end: "+=500", // 시작 후 500px 스크롤 된 후에 종료
      scrub: 1, // 부드러운 움직임. 스크롤바를 잡기까지 1초 소요
      snap: {
        snapTo: "labels", // 타임라인에서 가장 가까운 레이블에 스냅
        duration: {min: 0.2, max: 3}, // 스냅 에니메이션은 최소 0.2초, 최대 3초
        delay: 0.2, // 스냅 애니메이션을 수행하기 전 마지막 스크롤 이벤트에서 0.2초 기다림
        ease: "power1.inOut" // 스냅 애니메이션 종류
      }
    }
  });

// 타임라인에 애니메이션과 라벨 추가
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

• Lottie

https://airbnb.io/lottie/

After Effects로 만든 모션그래픽과 애니메이션 효과를 실시간으로 렌더링하여 네이티브 앱에 적용시키기 위해 에어비앤비가 만든 오픈소스 라이브러리.
After Effects에서 작업한 애니메이션 데이터를 Bodymovin 이라는 플러그인을 통해 JSON 파일로 추출하는 방식이다.
gif를 사용하여 애니메이션을 구현하게 되면 gif가 큰 리소스를 잡아먹는데, Lottie를 사용하면 gif 애니메이션보다 훨씬 작은 용량으로 제작되어 리소스를 크게 줄일 수 있다.
또한 gif는 고정된 크기로 렌더링되어 해상도 대응이 어렵지만, Lottie를 사용하면 JSON 파일로 제작하기 때문에 해상도에 구애받지 않는다.
Android, iOS, React Native, Windows 에서 사용할 수 있다.

• day.js

https://day.js.org/

자바스크립트에서 날짜나 시간을 표현할 때 사용하는 경량 플러그인.
Moment.js 라이브러리와 호환되는 API를 가졌으며 Moment.js보다 33배 가볍다.

웹 접근성

• 설명이 필요한 요소일 경우 다음과 같이 클래스를 만들어 화면에는 나타나지 않지만, 스크린 리더로 읽어주는 요소를 추가해둔다.

<span class="sr-only">필수 항목</span>

• input 태그가 필수항목일 경우 태그 안에 required를 넣어둔다.
  
  
  

템플릿 언어

• nunjucks

모질라의 자바스크립트 템플릿 언어
다국어 처리, 공통역역 Include, 페이지별 분기처리, 재사용 컴포넌트 작성 등에 사용한다.

ex) 컴포넌트 활용 - 페이지의 레이아웃, 폼 요소에서 재사용되는 요소들(input, select, textarea 등), 클립 이미지, 파일 첨부 요소, 약관 동의 요소 등 재사용되는 컴포넌트에서 사용했다.

ex) 분기별 처리 - 언어에 따라 보여지는 내용 다를 때 {% if %} ~{% else %} ~ {% endif %} 사용

ex) 반복되는 내용 {% for item in items(1,5) %} {{ 들어갈 내용 }}{{item}} {% endfor %}와 같은 형식으로 사용

데이터 포맷

• yml

타 시스템 간 데이터를 주고 받을 때 데이터 포맷이 맞지 않으면, 데이터 규칙에 대한 문서가 많아지는 등 번거로워 진다. 그래서 데이터 포맷에 대한 약속이 필요하다. 예전부터 사용해온 데이터 포멧에는 Xml과 Json 등이 있으며, yml(야믈)도 마찬가지로 데이터 포맷 중 하나이다. -(하이픈)을 통해 Array임을 알 수 있으며 :(콜론)으로 키와 값을 구분해주어 Xml과 Json보다 가독성이 좋다. 이번 프로젝트에서는 언어셋을 지정하기 위해 사용했다.

기타 자료들

• 더미 이미지

아래 링크를 이미지 src 경로로 설정해주면 임의 이미지가 생성된다.

https://placeimg.com/

그 외

• 유동적인 마크업과 CSS

관리자에서 콘텐츠 내용을 직접 등록하는 케이스가 있기 때문에 콘텐츠의 길이나 갯수가 바뀌더라도 레이아웃이 깨지지 않는 마크업을 해야 한다. 또한 그런 케이스를 고려하여 위치, 여백, 크기 등을 잡아야 한다.

• 재사용 할 수 있는 마크업과 CSS

화면설계서와 시안을 보면서 재사용할 수 있는 요소들은 컴포넌트 형식으로 작업해둔다. 여러 번 작업할 필요가 없어지고 변경사항이 생겼을 때 수정이 쉽다. 어떤 요소와 닿아있어도 동일한 UI로 보여야 하기 때문에 주변 요소들을 고려한 마크업과 CSS가 필요하다. 공통 컴포넌트 작업 시 공통 부분은 태그 내의 속성을 모두 같게 맞추어야 한다.
ex) 인풋 요소의 플레이스홀더 등

• iOS 크롬창의 높이 값 변화

iOS에서 크롬을 실행했을 때 스크롤의 움직임에 따라 화면의 높이 값이 세 가지로 바뀌었다. 그래서 바닥에 뜬 플로팅 버튼의 위치를 잡을 때 top이나 bottom에서 고정시켜두면 안되고 스크립트로 화면의 높이를 구한 뒤 그 높이에 맞게 위치 값을 잡아주어야 했다.

• 모바일 화면의 버튼이나 링크를 만들 때

버튼의 크기가 명확히 지정되지 않은 경우엔 손가락이 화면에 닿는 너비를 고려하여 터치되는 영역을 더 넓게 지정해준다.

• 화면설계서와 시안에서 맞지 않는 부분이 있으면 기획자나 디자이너에게 꼭 확인해본다. 임의로 했다가는 기획 의도와 맞지 않아서 나중에 전부 수정해야 할 수도 있다.
  
  

• 디자인적으로나 사용성면으로 사용자에게 불편하다고 생각이 들면 기획자나 디자이너에게 상황을 설명하고 대안이 있는지 알아본다. 때로는 대안을 제시할 수도 있다.
  
  

• PC와 모바일 기기가 같은 와이파이를 사용하고 있을 때, PC의 방화벽을 해제하면 모바일로 pc의 ip에 접속하여 작업물을 확인할 수 있다.
  
  

• 마크업 방식에 정답은 없기 때문에 프로젝트에 맞는 방법을 사용하는 것이 좋다. (물론 웹표준은 지키는 것이 좋다.)