Today I Learned ...
🖥️ 팀소개 페이지 만들기 #2
오늘부터 본격적으로 팀소개 웹페이지 만들기를 시작했다.
전체적인 레이아웃은 팀장님이 만들어주셨고, 나는 나의 개인 상세 페이지를 제작하기로 했다.
가장 먼저는 Figma를 활용해서 내가 구현하고자 하는 페이지 디자인을 만들었다.
핀터레스트를 통해 다양한 레퍼런스를 찾고, 그걸 바탕으로 내가 원하는 느낌을 만들었다.
먼저, 좌측에는 나의 이모지와 한줄 소개, MBTI와 생년월일을 작성했다.
그리고, 우측에는 세부적으로 나에 대해 소개하고, 내가 다룰 수 있는 툴과 자격증, 나의 취미생활, 그리고 개인 페이지 등을 작성했다.
또한, 각각의 이미지에는 하이퍼링크와 모달창을 적용할 예정이다.
프로필 이미지를 클릭하면 내 포트폴리오로, 자격증 아이콘을 클릭하면 내가 자격증을 준비하며 정리해둔 노션 링크로 연결된다.
Fields of Interest의 각 아이콘을 클릭하면 각각의 취미와 관련된 활동 사진과 세부 내용이 있는 모달창이 생성되게 할 예정이다.
하지만, 이전에 강사소개 웹페이지를 만들며 모달창 만들기에 실패했기에,, 나에게 남은 시간이 얼마나 있는지에 따라 적용을 할수도, 하지 않을수도 있을 것 같다.
마지막으로, Contact에서 메일 아이콘을 클릭하면 나에게 메일을 작성할 수 있는 페이지로, velog와 GitHub를 클릭하면 각각의 페이지로 연결된다.
이전에 웹개발 프로젝트를 진행할 때에는 대부분을 ChatGPT로 진행하고, 세부사항 수정만 내가 했었기 때문에 큰 어려움 없이 진행할 수 있었다.
그런데, 이번에는 공부하는 것인만큼 내 손으로 하나하나 작업을 하려고 하니 생각보다 복잡했다.
오늘까지 작업한 내용이다.
아직 나의 협업 스타일과 장점에 대한 부분을 작성하지 않았고, Fields of Interest에 모달창을 적용하지 못했다.
또, About Me의 섹션을 세로로 나누고 싶은데, 비율을 지정하지 못해 일단은 임시방편으로 위 div에 height를 적용해두었다.
그리고, 왼쪽 섹션에 "(따옴표)만 다른 폰트를 적용하고 싶었는데, 이게 마음처럼 되지 않아서 계속 트러블슈팅을 하고 있다.
내일은 이 부분에 더 집중해서 문제를 해결하고, 그 후에 모달창을 생성해보려고 한다.
🙃 오늘의 느낀점
이제 하루 12시간 동안 공부한지 2일째이다.
처음에는 집중도 잘 되고, 재미도 있었는데, 뒤로 갈수록 체력이 떨어져서 집중이 하나도 안됐다.
그리고 하는 것마다 다 막히니 흥미도 점점 떨어져갔다.
그래도 ChatGPT에만 의존해서 작업을 하던 이전과는 달리 뭐라도 내가 직접 만들 수 있게 되었다는 것에 감사하다.
내일은 조금 더 힘을 내서 진행을 해봐야겠다.
