[포트폴리오 페이지 만들기] 1. 컨셉 정하기

내 소개나 작업물들을 올릴 사이트가 하나 필요할 것 같아서 만들어보기로 했다.

사실 블로그 포스팅과 동시에 진행하는 건 '나 감시'를 위한 것이기도 하다.

1) 이렇게 순차적으로 기록을 남기면서 진행하지 않으면 내가 지금 전체 프로세스 중 얼만큼 와 있고,
어디를 향해 가고 있는지 흐릿해져서 진행이 더디다
(ex. 중간에 샛길로 새서 핀터레스트 이미지만 며칠동안 찾기도 하고)

2) 내가 결정한 것에 대한 근거를 텍스트로 정리함으로써 스스로 확신을 가질 수 있다.
(ex. React를 쓸까, next.js를 쓸까?)

3) 이미 결정된 사항에 대해 번복하는 일이 적어진다
(ex. 전체 컬러톤을 비비드로 정해놓고, 추후에 흑백이 더 좋아보이는 경우 등.. 바꿀까 고민하는 데 시간을 많이 쓴다)

전체적인 레이아웃 컨셉

얼마 전, 크리에이티브 코딩 모임에 나갔다가 어떤 분이 뉴진스 웹사이트를 소개해주셨다. (https://newjeans.kr/)
레트로 컨셉으로 아기자기하게 꾸민 게 재미있어보여서, 이런 식의 레이아웃 컨셉을 차용해보기로 했다.

전체적인 컨셉과 방향성 정하는 건 언제나 가장 즐거운 일이기도, 가장 어려운 일이기도 하다.
(아닌가.. 코딩이 더 어려운가.. 어쨌든 좋아보이는 게 너무 많아서 결정하기 힘들다)

오른쪽 캡쳐는 웹사이트가 어떤 기술로 만들어져있는지 체크해주는 크롬 확장 프로그램인 Wappalyzer다.
확인해보니 리액트 외 별다른 라이브러리는 사용하지 않은 것으로 보인다.. 음.. 한땀한땀 직접 구현한 건가?
(styled-components나 chakra ui 같은 걸 썼다면 우측 중간에 있는 javascript 라이브러리 칸에 표시된다.)



다음으로 핀터레스트에서 영감을 받을만한 이미지들을 서치해봤다.

아, 블랙 앤 화이트도 깔끔해서 좋고, 비비드는 눈에 잘 띄고 개성있어서 좋은데... 어쩌지?
(평소에는 파스텔 톤을 선호하는 편이지만, 이번에는 탈락!)

- 블랙 앤 화이트 : 내가 지금까지 작업한 웹사이트들 중 컬러풀한 것들이 있어서.. 어떤 콘텐츠를 얹어도 잘 어울릴 것 같다.
- 비비드 : 처음 사이트를 열었을 때, 흥미를 끌 수 있을 것 같다. 포트폴리오는 일단 초반에 눈길을 확 끄는 게 중요하니까...

고민될 땐 양념 반 후라이드 반...
블랙 앤 화이트를 베이스로 하되, 비비드한 포인트 컬러는 딱 하나만 사용하는 것으로 결정했다.

이미지로 예시를 들어보자면...


삐빅 이런 느낌 아니고 ❌

이런 느낌입니다 🔵

(핀터레스트에서 가져온 이미지들인데.. 옆에 작성자 출처까지 같이 캡쳐했으니 괜찮겠지?)


포인트가 될 한 가지 컬러는 https://flatuicolors.com/ 를 참고해서 골랐다.

후보 1) 추억의 윈도우98 청록색
레트로의 정석... 하지만 뭔가 변주를 주고 싶었다.

후보 2) 핫핑크
이건 개취이긴 한데.. 취향을 많이 탈 것 같아 패스..
이건 감상용 비쥬얼 미디어 아트가 아니라, 불특정 다수가 내용을 읽고 확인하게 될 포트폴리오 사이트니까 말이다.
핫핑크를 쓴다면 레트로와 단짝처럼 붙어다니는 수식어인 '키치한, 걸리쉬한' 느낌이 부각될텐데.. 적어도 내 포트폴리오가 소녀스럽게 보이지는 않았으면 했다.
또 레트로 컴퓨터 컨셉만으로도 포트폴리오 사이트로서는 이미 개성이 많이 담긴 것 같다.. (여기서 더하면 왠지 투머치가 될 것 같다는 우려)

후보 3) 청보라
보라색이 적당히 임팩트있고, 적당히 차분하고, 적당히 포인트가 될 것 같다고 생각했다.
처음에는 딥한 진보라를 떠올려서 '너무 우중충해보이진 않을까?' 했는데, 괜찮은 보라를 찾았다.
너무 여리지도 않고, 너무 딥하지도 않다. 딱 원하는 만큼 상큼하다. 찾았다 내 보라!

soft blue #778beb
cornflower #546de5

폰트

일단 포트폴리오 사이트니까 가독성이 중요한데...
타이틀이라면 모를까, 본문 내용은 그냥 무난한 본고딕이나 스포카산스 같은 걸로 작성해야 할까? 하는 생각을 했지만,
레트로 사이트에 일부만 모던깔끔st 가 들어간다면 좀 이질적일 것 같다..

일단 본문까지 레트로한 폰트를 넣어보기로 결정했다 (모험이다!)
완성 후 피드백을 받아보고 모던한 폰트로 교체하던가 해도 되니까... (완성이 목표임을 잊지 말자)

다행히 상업적 무료 사용이 가능한 레트로 한글 폰트들이 많이 나와있었다.
보통 영문으로 쓰여있을 땐 예뻐보이지만 한글로 쓰면 별로라던가, 아예 한글을 지원하지 않는 경우가 많아 걱정했는데 다행이다.

후보 1) 도스명조
그 시절 감성 빠방하긴 한데, 역시 이건 포트폴리오 목적의 사이트이므로...
명조체로는 내용을 길게 읽기 피로할 것 같다(도스고딕도 있으나 너무 넙데데해서 후보에 안 넣음)

후보 2) PF 스타더스트
도스명조보다는 잘 읽힐 것 같지만, 역시 길게 읽기엔 가독성이 썩 좋은 것 같지 않다.
그리고 약간 옛감성이 변형된 버전(?)이라 좀 질릴 것 같기도 하다.
(나우누리/천리안이 인터넷 1세대 찐 레트로 감성이라면, 이건 약간 1.5세대 느낌..? 색종이체, 나모웹에디터, 축전 유행하던 그 시기.. 재미있었지 끌끌)

후보 3) 둥근모꼴
폰트 사이트부터 그 시절 감성 그잡채다. (https://cactus.tistory.com/193)
가독성도 괜찮아보이고, 위 폰트들에 비해 쉽게 질릴 것 같지도 않다. 이걸로 결정! 💚

결정된 컨셉

- 키워드 : 레트로, 도트, 픽셀아트
- 컬러 : 흑백 베이스 + 청보라색 원컬러 포인트
- 폰트 : 둥근모꼴


후반 가서 좋아보이는 것들 이것저것 갖다 붙이다가, 전체적인 방향성을 잃을 것이 우려된다.
위 키워드들에서 벗어나지 않도록 방향을 잘 잡으며 나아가야겠다.

고려할 것

pc 외 모바일 환경에서도 깨져보이지 않도록 해야한다.
채용 담당자분들이 포트폴리오를 모바일로 확인하는 경우가 많다고 들었다.

---

이렇게 텍스트로 정리하면서 시작하니, 진행이 수월한 것 같다.
(실제로 컨셉 서치에 며칠을 고민만 하면서 보냄..) 시작이 좋다!