210108 잡다한 제작일지

블로그

테스트 라이브러리 도입

적어도 스크리븥의 오류는 모두 해결하고 배포하기 위해 Jest로 테스트를 작성 중입니다.
근데 말썽을 일으키는 코드는 대부분 이런 방식으론 잡기 힘든 거라, QA Wolf 같은 라이브러리도 곁들여야 하나 싶네요.

애니메이션

검색창

버튼을 누르면 검색어를 입력하는 부분은 아무런 트랜지션 없이 나타났는데, 이젠 내비게이션에 있는 햄버거 아이콘, 검색 아이콘을 제외한 요소가 올라가고 검색창이 내려오는 애니메이션을 추가했습니다.

여담으로 애니메이션 만들면서 깨달았는데, 햄버거 버튼과 검색 버튼 모두 똑같은 모양의 버튼을 겹쳐뒀었는데, 그럴 필요가 없었더라고요. 그냥 검색 취소 / 검색어 제출 버튼은 위치만 그대로 두고 안에는 아무것도 표시가 안 되게 업데이트했습니다. 렌더링해야 하는 건 줄었지만, 작동은 똑같이 합니다.

포스트 카드

Masonry 레이아웃을 부드럽게 적용하기 위해 Masonry 레이아웃이 적용되는 포스트 카드들은 이미지를 불러온 뒤 페이드인 되도록 제작해뒀는데, 아무래도 한꺼번에 페이드인 되는 것보다 순차적으로 페이드인 되는 게 더 예쁘지 않을까 싶어 애니메이션을 추가해봤습니다.

헤더 디자인

카테고리를 제목 위로 올리고, 카테고리의 대표색이 배경이 아닌 글자색으로 지정되게 업데이트했습니다.
그래디언트도 모두 제거하고 배너 이미지의 투명도를 낮추는 방식으로 회귀했습니다.

BEM

<article class="post-card reveal" style="top: 0px; left: 10px">
    <a href="https://marshallku.com/notice/2020%eb%85%84-%ea%b2%b0%ec%82%b0">
        <figure class="post-card__figure">
            <img
                class="post-card__thumbnail"
                src="https://i1.marshallku.com/wp-content/uploads/2020/12/2020-결산-400x400.png"
                alt="2020년 결산"
            />
        </figure>
        <header class="post-card__info">
            <h2 class="post-card__title">2020년 결산</h2>
            <p class="post-card__desc">잘 가, 2020</p>
            <time class="post-card__date date" datetime="2020-12-31 21:56">
                1주 전
            </time>
        </header>
    </a>
</article>

좀 더 체계적인 HTML, CSS 작성을 위해 군데군데 BEM을 사용했습니다.

내비게이션에 있는 카테고리 목록은 한참 전에 디자인해두고 .mega-menu > ul > li > a같이 알아보기 힘든 선택자가 여기저기 도배되어있어 잘 건들지도 않았는데, 이번 기회에 싹 뜯어고쳤습니다.
크게 쓸모도 없는데 그 사실이 발각당하지 않아 숨어있던 CSS 코드가 생각보다 많더라고요.

굳이 BEM이 아니더라도, HTML 구조를 좀 체계적으로 짜두니 CSS에서 선택자도 훨씬 간결해지고, 재사용성도 올라갑니다.

어떤 오후

시간을 '2020-01-08 09:20'에서 '5분 전'처럼 변경하다 오류가 발생하면 지금까지 'NaN년 전'으로 표기됐는데, 이젠 '어떤 오후'로 표기되게 해뒀습니다.
오류가 잦은 부분이라 여러 브라우저에서 검토를 꽤 많이 했는데 아직도 사파리 같은 브라우저에선 간혹 오류가 발생하더라고요. 형식도 같고 변환하는 브라우저도 같은데 어떻게 오류가 가끔 생기는진 아직도 모르겠네요.