디지털 환경과 스마트 IT 기반의 큐레이션을 반영한 " STAMP CURATION PROJECT "

프로젝트를 왜 시작하게 되었나요?

IT기반의 인프라 확산에 따라 잊혀져가는 아날로그에 대한 접근성을 새롭게 바라볼 시각이 필요하다고 생각했습니다. Art&Tech를 다루는 creative coder로서 시각예술 정보를 다룰 수 있는 진보된 역할을 수행해야 하는 시점에 놓이게 된 것이죠.

한국우편사업진흥원에서 운영하고 있는 한국우표포털에는 매월 발행되는 우표를 실시간으로 업로드 하고 있습니다. 우표수집에 취미가 있지 않은 이상 이미 일반인들에게 우표라는 존재는 추억속 물건일뿐 잊혀져 가는 상태죠.

이 점을 이용해 감성 소비의 욕구가 높아진 요즘 MZ세대 또는 예술 콘텐츠 수요자들을 타겟으로 온라인 환경과 디지털 기기에서 손쉽게 활용할 수 있는 다양한 스마트 미디어 콘텐츠를 생산했습니다.
월별로 발행되는 우표 특성상 웹기반 큐레이션 전시를 특정 기간에만 제공함으로써 스마트폰, PC사용자들이 일시적인 스마트 가이드로서 활용할 수 있도록 했습니다.

Main page

하나의 페이지로 구성되었기에 최대한 깔끔하고 간결한 정보를 담으려고 노력했습니다.
바디에는 5월에 발행된 "조선의 천문과학 우표" 4종이 보이고 우표이미지에 마우스 오버시 해당 우표에 대한 원이 돌아가는 동적효과가 적용되며 자세한 우표정보를 볼수 있습니다.

푸터에는 K-stamp 홈페이지로 연결되는 간단한 버튼을 추가했습니다.

"조선의 천문과학"우표 큐레이션 컨셉에 맞게 전체적인 디자인을 우주로 표현했습니다. 백그라운드에는 눈이 내리는 동적인 배경을 사용했고 각 우표에는 ring을 추가해 각 우표가 행성같이 보이도록 했습니다.

contents div

<div class="container">
  <div class="panel">
    <div class="ring">
      <div class="card card1"></div>
      <div class="border">
        <p class="title"></p>
        <div class="slide">
          <h6 class="para">조선의 천문과학 우표<br />조선의 천문의기</br>(측우기)</h6>
          <div class="line">
            <h6 class="para">DATE<br /></h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">2021.04.21</h6>
          </div>
          <div class="line">
            <h6 class="para">NUM</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">3503</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  

div class="panel" 로 4개의 아이템을 만들고 div class
div class="panel" 로 4개의 아이템을 만들고 _div class="container"으로 전체 컨테이너를 담아보았다. align-items 를 center로 잡아 가운데 정렬을 했습니다.

ring 돌아가게 하기

.ring {
color: #fffbf1;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 170px;
}

• 어두운 바탕에 ring이 잘보이게 위해 color: #fffbf1 로 지정해 빛나는 느낌을 주었다.

.ring:before,
.ring:after {
  content: "";
  padding: 0.7em 0.4em;
  position: absolute;
  left: 50%;
  width: 115%;
  top: 50%;
  display: block;
  border: 5px solid #50c9c3;
  border-radius: 50%;
  transition: transform 1s;
  transform: translateX(-50%) translateY(-50%) rotate(50deg);
}

.ring:before {
  border-color: rgb(235, 235, 235) rgb(235, 235, 235) rgba(0, 0, 0, 0)
    rgba(0, 0, 0, 0);
  z-index: -1;
}

.ring:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(235, 235, 235)
    rgb(235, 235, 235);
}

• 홀로그램 버튼 (마우스 오버시 겹쳐지게 하기)

  k-stamp 바로가기 버튼에 마우스 오버를 하면 2개의 사각형이 겹쳐지는 동적 효과를 주기 위해 다음과 같은 CSS코드를 사용하였다.

  .hologram-btn {
  display: inline-block;
  padding: 1.5em 2.6em;
  border-radius: 0;
  color: #e3fffd;
  margin-top: 2rem;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, 80%);
  transition: all 250ms ease;
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid;
    transition: 0.25s;
  }
  &:before {
    transform: translateX(-0.25em) translateY(0.25em);
  }
  &:after {
    transform: translateX(0.25em) translateY(-0.25em);
  }
  
  &:hover {
    &:before,
    &:after {
      transform: translateX(0) translateY(0);
    }
  }
  }

  * &:hover 를 이용해 마우스 커서가 올라가 있을때 사각형이 겹쳐지게 한다.
  * :before, :after 가상 선택자를 이용해 마우스 오버 전과 후위 위치를 지정해주었다.