포트폴리오 개발 정리

dev2820·2022년 4월 16일

Image Sprite aos figma github pages vue 다크모드 클레이모피즘 포폴

프로젝트: 포트폴리오 만들기

목록 보기

1/2

뭔가 개성있는 포폴 페이지가 만들고 싶었다.

구상

클레이모피즘

요즘 뉴모피즘 다음으로 클레이모피즘이 유행이라고 해서 그리고 단순하게 클레이모피즘이 예쁘고 맘에 들었기 때문에 클레이모피즘을 적용해 포폴 페이지를 만들고 싶었다. 확실히 뉴모피즘보단 컴포넌트간에 구분이 확실해서 웹페이지에 적용하기 좋아 보였다.

Mockup

그래서 먼저 Figma로 만들고 싶은 페이지를 구상해봤다. 처음엔 틀부터 잡고 어떤식으로 구상할지, 계산해 목업을 만들었다.

근데 한가지 실수했던게, 모니터를 꽉 채우게 구상을 했던 것이다. 모니터 크기별로 대응할 수 있도록 width를 (위 사진의 빨간 영역) 1000px~1100px을 넘지 않게 구상했어야했는데, 1200px을 기준잡고 만들어버렸다. 나중에 목업대로 만들려고하니까 화면이 꽉 차더라. 바로 아차! 해서 1000px로 width를 새로 고정했다.

Prototype

다음으로 유튜브에서 클레이모피즘을 Figma에 적용하는 강의 영상을 보고 참고해 컴포넌트들을 구상하고 프로토타입을 만들어보았다.

↑ light모드 컴포넌트들

클레이느낌의 컴포넌트를 만드는건 어렵지 않았다. 가까이서 보면 이런 느낌인데

잘 보면 알겠지만 inner-shadow와 drop-shadow를 쓰고 shadow를 검정색이 아니라 테마색에 맞게 입혀주면 된다.

1번이 연하고 투명한 왼쪽 위에서 들어오는 innser shadow, 2번은 오른쪽 아래에서 들어오는 더 긴 innser shadow, 3번은 약간 아래쪽으로 뻗는 drop shadow 이다.

참고로 radius는 공통적으로 1rem(16px)을 줬다.
화면에 배치하니 이런 느낌

참고로 위 이미지들에 들어간 3d 아이콘, 이미지는 Figma Community에서 받아서 만들었다.

3D 캐릭터 by Alzea Alzea Arafat

3D 아이콘 by REALVJY

github 부분이 비어있는 이유는 원래 3d 테마에 맞춰 github도 3d 모양을 넣었었는데, github logo 사용 규칙을 좀 읽어보니

대충 변형하지 말라고해서 하지말라는 행위에 뭔가 걸리는것 같아서 빼고 위에 따봉 그려넣은 사진으로 대체했다.

추가적으로 사용된 다른 사진들은 Unsplash에서 가져와 사용했다.
진짜 마지막으로 구름과 달, 해는 본인이 만들었다. 저작권 신경 쓰다 보면 결국 그냥 "에이 내가 만들고 말아!" 가 되는 것 같다.

다크모드 prototype

똑같은 컴포넌트로 테마만 바꿔서 다크모드용 컴포넌트를 만들어줬다.

개인적으론 다크모드쪽이 더 맘에 들었다.

구현

Vue3

포폴 페이지이니, 기본적으로 잘쓰는 프레임워크를 쓰고 구현이 오래걸리는 부분은 빠르게 재끼고 싶었다. 그래서 vue를 채택. 다만 아직 익숙하지 않은 composition api에 좀 친숙해지고 싶어서 vue3 composition api를 적용해 개발을 했다.

Typescript로 작성했는데, 아직 어렵다. 특히 Vue에 적용하기가. typescript-eslint가 개발할땐 에러를 안잡아주다가 막상 build하면 에러를 마구 내는데, 더 공부해야겠다는 생각만 들었다. 언제하지?

CSS

클레이모피즘을 CSS로 구현해야했는데, 다음과 같이 CSS를 줬다.

/* CSS 변수 정의*/
  --button-background: #fefefe;
  --button-inner-shadow: inset 0.125rem 0.125rem 0.25rem
      rgba(122, 206, 235, 0.25),
    inset -0.25rem -0.25rem 0.5rem rgba(122, 206, 235, 0.5);
  --drop-shadow: drop-shadow(0px 6px 8px rgba(00, 169, 226, 0.75));

/* 버튼 CSS */
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 0.75rem;
  font-size:1rem;
  background-color: var(--button-background);
  filter: var(--drop-shadow);
  box-shadow: var(--button-inner-shadow);
  cursor: pointer;

이런 느낌이 나왔는데,

뭔가 비슷하면서도 다른것 같기도 하고 아닌 것 같기도한 느낌
참고로 위가 CSS를 입힌 버튼 아래는 Figma로 만든 버튼이다.
그래도 얼추 성공적으로 구현한 것 같다.

Image Sprite

다음으로 기술 스택을 적는 페이지를 만들 때 이미지 요청 횟수를 최적화를 위해 이미지 스프라이트를 이용했다.

대충 이런 png를 만들어놨고 스프라이트를 적용해 하나씩 잘라서 보여주는 식

구현은 아래와 같다. 코드가 많이 길어서 일부만 보여줌

크아악 이게 뭐야 할수도 있지만 꽤 간단하다.
예를 들어 .github 아이콘은 background의 (-80px,-80px) 위치를 5rem씩 잘라 보여주는 것이다.

참고로 -를 붙여줘야 오른쪽으로 이동한다.

AOS

https://michalsnik.github.io/aos/

Animate On Scroll Library 라는 뜻으로 스크롤에 애니메이션을 넣어주는 라이브러리이다.

이런거 해주는 라이브러리

Vue에 적용할때는 index.html에서 아래처럼 unpkg로 받아서 <script> 안에서 init 해주면 된다.

<head>
	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
</head>
<body>
  <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      AOS.init(); // 이거 해줘야함
    </script>
</body>