먼저, welcome page 이후에 마주하는 main page는 크게 4개의 파트로 구성할 예정이다. 대충 jsx로 이런 느낌이다. export default function Home() { return ( ); } 오늘은 그 첫번째인 intro 파트를 어떻게 자연스럽게 welcome page와 연결시키는지이다. # Welcome to Intro Intro 파트는 앞서 가구현한 welcome page를 지나면 처음으로 마주하는 페이지이다. 그렇기 때문에 welcome page와 intro page가 연속성있게 연결되어 라우팅 과정이 자연스럽게 느껴지기를 원했다. 이를 위해서 내가 택한 방법은 1. welcome page에서 클릭하면 가속되는 것을 이용해 사용자가 클릭을 오래 하고 있게끔 유도한다. 2...
앞선 글에서도 말하였듯이 아래 코드펜 프로젝트를 기반으로 welcome page를 제작하였다. https://codepen.io/akm2/pen/RwQXLdP # 조금 더 구체적인 컨셉 그렇다고 저걸 그대로 가져다 쓰기에는 허전하다. 저 파티클은 우주 컨셉의 배경일 뿐, 주인공이 될 수는 없다. 그렇다면 메인 모델은 누가 되어야 할 것인가? 나는 주인공을 혜성으로 정했다. 우주를 자유로이 유영하는 아름다운 천체이자 미지의 세계로 두려움없이, 또 끊임없이 나아가는 낭만을 품은 천체이다. 또한 여러 공부를 하다보면 마주치는 'deep dive'란 용어에 가장 잘 어울리는 존재이며 아름다운 꼬리를 남기는 모습이 끊임없이 탐구하며 발자취를 남겨가는 모습과 닮았다고 느껴졌다. 그럼 이 각설하고, # 구현 코드펜 ..
# 시작하기에 앞서 Next.js로 뭘 만들까 하다가 아이디어가 없어 한동안 알고리즘 공부만 하고 있었는데, 가장 중요한걸 빠뜨리고 있었다. 프론트엔드 개발자라면 자기 페이지 하나 쯤은 있어야 하는데, 그게 없다...! 고로 만든다. (이걸 이제야 생각하는 나 자신 반성하자...) # 프로젝트 구상 크게 두 페이지로 구성할 계획이다. 1. Welcome page 뭐든지 첫 인상이 가장 중요하다고 하였다. 여러 프론트엔드 개발자 분들의 포트폴리오를 검색해봤고, 그 중 아래 페이지가 가장 인상깊었다 . http://parkjin.com/ 방문자와 상호작용할 수 있는 welcome page를 준비하고 해당 상호작용을 자연스레 자신의 스토리와 연결짓는 말 그대로 순식간에 방문자를 자신의 이야기 속으로 빨아들이는..
