수업 진도를 성실히 따라가고.. 촉박한 포트폴리오 작업으로 시간을 보내다 보니.. (ㅎ,,ㅎ)
마지막 포스팅에서 벌써 한 달이 지나버렸다! 🙂
이런 게으른..! 찰싹! 블로그 할 자격이 없다!! 다 치워!!
저번 주에 포트폴리오 2차 발표가 있었다. 화면을 gif으로 녹화해서 남겨놓으려 한다.
1. 개인 포트폴리오 랜딩 페이지 제작!
처음 디자인과 비교해 불필요한 부분은 다 삭제하고 심플하게 디자인했다. 상단 About me에서 학력(학원 수료), 커리어, 스킬 등을 확인할 수 있다. Project섹션 상단에는 가장 공들인(?) 포트폴리오 3개를 선정해 전시하고, 하단에는 미니 프로젝트를 보여줄 생각이다. 미니 프로젝트를 전부 나열하기에는 메인 페이지가 심각히 길어질 것 같아 따로 Project Collection 페이지를 만들 계획이다.
- 메인 페이지의 light, dart버전을 확인할 수 있는 토글 버튼이 있다. localstorage를 사용했다.
- 상단의 대메뉴를 클릭하면 부드럽게 스크롤되며 해당 섹션으로 이동한다.
- Contact me 버튼에 개인 메일 주소를 연결해서 바로 나에게 메일을 보낼 수 있다.
- 프로젝트마다 view live, view github 2개의 버튼을 만들었다. 작업한 사이트로 바로 이동할 수 있고, 깃허브 페이지 버튼을 클릭해 소스코드를 확인할 수 있다.
- 프로젝트마다 프로젝트 명, 사용 언어, 작업 내용 등의 상세 설명을 기재해 두었다.
- 깃허브 Readme에 프로젝트에 대한 설명을 작성했다.
- 반응형으로 작업했다. (아직 중간중간 마다 깨지는 부분이 있어서 수정 작업 필요..)
- Project 섹션은 디자인을 다시 잡을 계획이다.
2. 페이스북 레이아웃을 클론코딩한 소셜 북
페이스북 레이아웃을 비슷하게 클론 코딩하여 일단 껍데기(?)를 만들어 놓은 상태다. 사이트 로고는 'Looks Like F'라는 문구로 정해 피그마로 후딱 만들어서 넣었다. 이 프로젝트의 목적은 껍데기에 부가기능을 추가하는 것이다. 플러그인을 사용하지 않고 직접 스크립트로 개발한 TODO리스트, 랜덤 오늘의 명언, 현재 시간, 계산기, 책&영화 관람 기록, 날씨정보 확인 등 기능을 추가할 계획이다.
- PC형만 생각하고 작업했지만 반응형으로 바꿔볼 생각이다.
- 다크vs라이트 버전의 토글 버튼을 제작했다. (포트폴리오 랜딩 페이지에도 써먹었다.)
- 양쪽 사이드 메뉴바는 position sticky를 사용했다. 그런데 가운데 메인 콘텐츠를 끝까지 스크롤하니 같이 스크롤되어 따라 올라간다. fixed로 바꾸고 overflow auto로 바꿔야겠다.
- 비슷한 스타일의 ui는 모듈화 하여 작업했다. 사진은 좋아하는 동물 사진으로..
- 마지막 포트폴리오 발표까지 계획한 부가기능을 모두 추가해 놓을 것이다.
3. 직접 그린 그림들을 사용한 '가상의 웹 갤러리'
클론 코딩할 사이트를 찾기 위해 디비컷, 드리블, 어워즈 등에서 계속 서칭을 했다. 찾다 보니 화가들의 갤러리 사이트를 보게 되었는데 거기서 아이디어가 생겼다. 내 유일한 취미가 아이패드 프로크리에이트로 그림 그리기다🎨. 그동안 그려놓은 그림들이 많은데, 이번 기회에 사심을(?) 담아 가상의 웹 갤러리 콘셉트로 사이트를 작업했다. 교육 과정 중에 배운 UI 개발 소스를 최대한 활용하고자 슬라이드 UI, 스크롤 이벤트, 팝업 등을 다양하게 몰아넣었다. 추후 가상의 굿즈 상품을 등록하여 상품을 위시리스트에 담고, 상품의 수량을 증감시키고, 합계까지 구할 수 있는 쇼핑몰의 장바구니 기능을 추가하려고 한다.
- 플러그인을 사용하지 않고 자바스크립트, 제이쿼리로 개발한 UI를 사용했다.
- 무한루프 슬라이드는 아무래도 swiper 플러그인을 사용해야 할 것 같다..
- 스크롤 이벤트를 사용해 원하는 지점이 스크롤 top값에 도착하면 css transform 속성으로 밑에서 천천히 위로 떠오르는 효과를 확인할 수 있다.
- 레이어 팝업 ui를 사용했다. 접근성에 맞는 팝업창이다.
- 사이드 메뉴바, TOP 버튼은 픽스로 위치를 잡았다. 이 둘은 최상단 인트로 부분에서는 보이지 않게 if문을 사용해 스크립트를 작성했다.
- 후에 쇼핑몰 장바구니 기능을 추가할 계획이다.
그 외. 세종복지다옴 클론 코딩, 메가박스 껍데기 + 영화 웹서비스 API, 관리자 페이지 등
- 관공서 홈페이지를 클론 코딩해보려고 선정한 세종복지다옴. 마우스 휠 이벤트, 스크롤 이벤트, 슬라이드 UI, 탭 메뉴, 캔버스, 테이블, input 등의 요소들이 많이 있다. 그리고 반응형이라 작업할 부분이 이것저것 많을 것 같다. 3차 발표까지 마무리할 수 있을지..!
- 2년 전 퍼블리셔 포트폴리오를 만들며 작업한 메가박스. 메가박스 PC형을 클론 코딩해놓은 것이 있어서 활용해 보려고 한다. 일단 이전의 개판 직전 마크업을 접근성에 맞게 다시 작성하고, 영화 웹서비스 API를 접목시켜 최신 영화, 추천 영화 등을 메인 페이지에 뿌려줄 계획이다. API를 활용한 프로젝트를 꼭 해보고 싶었기 때문에 좋은 기회가 될 것 같다.
- 관리자 페이지(어드민 페이지)는 지금 수강 중인 아카데미 과정에 포함되어 있다. admin monarch에서 관리자 페이지 디자인을 참고할 수 있다. 거의 버튼, 폼, 테이블로 이뤄져 있다. 폼을 제대로 배우고 싶었기 때문에 수업이 굉장히 기대된다.
- 부가적으로 미니 프로젝트를 중간중간 만들어 볼 생각이다. 이미 좋은 아이디어를 소재로 개발자 선배님들이 유튜브에 무료로 영상을 많이 올려주셨으니 그분들께 절을 먼저 드리고.. 인강을 보면서 계속 코드를 작성하고 부가기능을 추가하고, 디자인도 바꿔보고 다양한 시도 후에 프로젝트 컬렉션 페이지에 전시할 생각이다.
수료일이 4월 12일이고 얼마 남지 않았다. 걱정이 매우 앞선다 하하!
다른 학원이나 부트캠프의 웹프론트엔드개발자 포트폴리오는 어떤지 궁금하다.
이미지 구글에 올라온 '프론트엔드개발자 포트폴리오'는 거의 다 확인했다. (서칭 해서 나오는 거 거의 다 봄)
내 포폴을 보면서.. 음.. 이게 개발자 포트폴리오가 맞나?.. 퍼블리셔 포폴 아닌가?..라는 애매한 생각이 많이 든다.
부족하다 싶은 부분이 있으면 혼자 공부하며 채우면 되니까 벌써부터 좌절하지 말자.
최선을 다해서 포폴 사이트를 완성시키고. 함께 성장할 수 있는 곳을 잘 찾아서 꼭 취업에 성공하자고!
모든 주니어 개발자들 파이팅!