목차
서론: 30일 간의 도전과 성장
웹 개발자로서의 첫 걸음은 긴 여정의 시작입니다. 특히 포트폴리오를 제작하는 과정은 자신이 그동안 쌓아온 기술을 입증하고, 실제 프로젝트를 통해 성장할 수 있는 좋은 기회가 됩니다. 이번 블로그 포스트에서는 저의 아들개발자 코딩일기를 바탕으로 첫 포트폴리오를 완성하기 위해 30일 동안 진행한 도전기를 소개하고자 합니다. 이 과정에서의 어려움과 배움, 그리고 CSS 디자인과 배포 과정에 대해 자세히 설명드리겠으며, 여러분도 함께 이 여정을 경험해 보시길 바랍니다.
첫 포트폴리오 제작은 단순히 코드를 작성하는 것을 넘어, 자신을 표현하는 창작의 과정이기도 합니다. 아이디어 구상부터 시작하여 디자인, 개발, 배포까지의 모든 단계에서 중요한 선택과 고민이 존재합니다. 매일매일 조금씩 나아가며 완성해 나가는 과정은 분명 어려움이 따르지만, 그만큼 성취감도 큽니다. 이제 본격적으로 30일 동안의 도전기를 시작해 보겠습니다.
1일차: 목표 설계와 아이디어 구상
첫 날은 목표를 세우고, 포트폴리오에 담을 프로젝트 아이디어를 구상하는 데 집중했습니다. 무엇보다 중요한 것은 내가 어떤 주제로 포트폴리오를 구성할 것인지였습니다. 웹 개발을 통해 어떤 문제를 해결하고 싶은지를 명확히 하기 위해, 다양한 아이디어를 리스트업했습니다.
- 일상 생활에 도움이 되는 웹 앱
- 기술 블로그 사이트
- 작품 갤러리 웹사이트
이 중에서 가장 흥미로운 아이디어는 '일상 생활에 도움이 되는 웹 앱'이었습니다. 사용자들이 자주 사용하는 기능들을 모아 도와주는 앱을 개발하기로 결정했습니다. 이후에는 간단한 스케치를 통해 웹사이트의 정보 구조도를 작성하고, 주요 기능을 정리했습니다.
2일차: UX/UI 디자인 스케치
디자인은 사용자 경험(UX)과 사용자 인터페이스(UI)가 중요한 요소입니다. 포트폴리오의 첫 인상을 좌우하는 디자인을 위해, 다양한 레퍼런스를 참고하며 UX/UI 디자인을 스케치했습니다. 이 과정에서 가장 많은 시간을 투자한 것은 사용자 페르소나를 설정하는 것이었습니다. 타겟 사용자가 누구인지 명확히 하여 그들의 필요를 반영할 수 있는 디자인을 목표로 했습니다.
- 사용자의 연령대와 성별 분석
- 사용자의 관심사와 행동 패턴 조사
스케치 후에는 와이어프레임을 제작해 간단한 프로토타입을 구현했습니다. 이를 통해 사용자가 앱을 어떻게 탐색하고 이용할지를 테스트할 수 있는 기회를 가졌습니다. 초기 단계에서의 피드백을 반영하는 것은 이후 개발에 큰 도움이 될 것임을 깨달았습니다.
👉아들개발자 코딩일기 – 첫 포트폴리오 완성까지 30일 도전기, CSS 디자인, 배포 바로가기3일차: HTML 기초 학습
디자인이 완료된 후, HTML의 기본 구조를 학습하는 시간으로 돌아갔습니다. HTML은 모든 웹 개발의 기초로, 웹 페이지의 콘텐츠를 구조화하고 표현하는 데 필수적입니다. 다양한 태그와 속성을 활용하여 자신의 웹 페이지를 구성하는 방법을 익혔습니다.
- 자주 사용하는 HTML 태그
- 웹 페이지 구조 이해하기
기초적인 HTML 문법을 익힌 후, 직접 간단한 웹 페이지를 만들어 보았습니다. 이를 통해 자연스럽게 HTML의 활용도를 높이고, 실습을 통해 학습할 수 있는 좋은 기회가 되었습니다. HTML의 구조를 이해하는 것이 나중에 CSS와 JavaScript를 다룰 때에도 큰 도움이 될 것이라고 생각했습니다.
4일차: CSS 디자인 시작하기
HTML을 기반으로 스타일을 입히기 위해 CSS를 배우기 시작했습니다. CSS는 웹 페이지의 시각적 요소를 조정하고, 디자인을 완성하는 데 필수적입니다. 다양한 CSS 속성을 적용하여 텍스트, 배경, 레이아웃 등을 설정하는 방법을 익혔습니다.
- CSS 기본 선택자와 속성
- 레이아웃 구성하기 (flexbox, grid)
여기서 가장 흥미로웠던 점은 CSS가 제공하는 다양한 디자인 가능성과, 나만의 스타일을 구현할 수 있다는 점이었습니다. 기본적인 스타일을 적용한 후, 내가 디자인한 스케치와 비교하며 수정 및 보완 작업을 진행했습니다. CSS의 다양한 기능을 통해 웹 페이지가 더욱 매력적으로 변하는 것을 느낄 수 있었습니다.
5일차: JavaScript 기초 및 활용
CSS 디자인이 어느 정도 마무리된 후, JavaScript를 통한 동적인 요소 추가에 착수했습니다. JavaScript는 웹 페이지에 생동감을 불어넣는 데 필수적인 요소로, 사용자와의 상호작용을 가능하게 합니다. 다양한 이벤트 리스너와 함수를 활용하여 기본적인 동작을 시연하며, 웹 페이지의 기능을 확장해 나갔습니다.
- 기본적인 JavaScript 문법과 문서 객체 모델(DOM) 이해하기
- 간단한 이벤트 처리 구현하기
JavaScript를 통해 내 웹 페이지에 버튼 클릭 시 콘텐츠가 변경되거나 애니메이션이 실행되는 등의 인터랙티브한 요소를 추가하게 되었습니다. 이러한 경험은 포트폴리오의 완성도를 높이는 데 큰 도움이 되었습니다. 또한, JavaScript의 활용을 통해 사용자의 편의성을 고려한 기능을 설계할 수 있었습니다.
6일차: 테스트와 디버깅
코드를 작성한 후에는 반드시 테스트와 디버깅 과정을 거쳐야 합니다. 작성한 코드가 의도한 대로 작동하는지 확인하는 과정은 매우 중요합니다. 특히, 다양한 브라우저와 기기에서의 호환성을 테스트하는 것이 필요했습니다.
- 브라우저 개발자 도구 활용하기
- 코드 오류 및 버그 수정하기
이 과정에서 발생하는 오류를 수정하며 문제 해결 능력을 키울 수 있었습니다. 디버깅이 처음에는 어려웠지만, 문제를 해결하는 과정에서 많은 배움을 얻었습니다. 이러한 경험은 향후 개발자로서의 역량을 키우는 데 큰 도움이 될 것입니다.
7일차: 배포 준비와 배포
마지막 단계로, 웹 프로젝트를 배포하는 과정을 진행했습니다. 실제 사용자가 접근할 수 있도록 하려면 배포 과정이 필수적입니다. GitHub Pages와 같은 무료 호스팅 서비스를 사용하여 웹 페이지를 배포하는 방법을 배웠습니다.
- GitHub에 프로젝트 업로드하기
- 배포 후 확인 및 수정 작업 진행하기
배포 후, 다른 사람들에게 웹 페이지를 공유하고 피드백을 받을 수 있는 기회를 가졌습니다. 이러한 피드백은 향후 프로젝트 개선에 매우 유용할 것입니다. 처음으로 배포한 웹 페이지가 실시간으로 사용자에게 보여지는 것을 보며 큰 성취감을 느꼈습니다.
결론: 지속적인 발전과 향후 계획
30일 동안의 도전기를 통해 첫 포트폴리오를 완성하고, 웹 개발의 기초를 다질 수 있었습니다. 매일 조금씩 나아가는 것이 얼마나 중요한지를 깨닫게 되었습니다. 앞으로도 지속적으로 더 많은 프로젝트에 도전하고, 새로운 기술을 익히며 성장해 나가고자 합니다.
첫 번째 포트폴리오 제작은 단순한 시작에 불과하다는 것을 알게 되었습니다. 앞으로는 더욱 다양한 기술을 배우고, 더 많은 경험을 쌓아 나가야 할 것입니다. 이 블로그 포스트를 통해 같은 길을 걷고 있는 분들에게 작은 도움이 되었길 바랍니다. 여러분도 도전해 보세요, 그 과정에서 얻는 경험은 여러분의 성장에 큰 도움이 될 것입니다.
FAQ
Q: 포트폴리오를 만들 때 가장 중요하게 고려해야 할 점은 무엇인가요?
A: 포트폴리오를 만들 때는 나의 기술과 경험을 잘 보여줄 수 있는 프로젝트를 선택하는 것이 중요합니다. 또한, 디자인과 사용자 경험을 고려하여 직관적이고 매력적인 포트폴리오를 만드는 것이 필요합니다.
Q: 배포는 어떻게 진행하나요?
A: 배포는 GitHub Pages와 같은 무료 호스팅 서비스를 이용하면 쉽고 빠르게 할 수 있습니다. 프로젝트 파일을 업로드하고, 배포 URL을 통해 다른 사용자와 공유할 수 있습니다.
Q: 처음 웹 개발을 시작하려면 어떤 언어부터 배우는 것이 좋나요?
A: 웹 개발을 시작할 때는 HTML과 CSS로 기초를 다진 후, JavaScript를 배우는 것이 좋습니다. 이 세 가지 언어는 웹 페이지를 구성하는 기본적인 요소들입니다.
👉아들개발자 코딩일기 – 첫 포트폴리오 완성까지 30일 도전기, CSS 디자인, 배포 바로보기