유데미 인사이트

바쁘신 분들을 위한 핵심 요약 체크리스트 ! 먼저 확인하세요👆👆

---

웹 개발 포트폴리오 작성은 어떻게 시작할까요? 웹 개발을 배우는 가장 좋은 방법 중 하나는 웹 개발 프로젝트 아이디어를 하나씩 완성하는 것입니다. 미래의 직장에 작업물을 공유할 계획이 있다면, 결과적으로 ‘성장’을 보여주는 프로젝트로 가득한 포트폴리오를 갖게 될 거예요. 여기 간단한 것부터 고급에 이르기까지 포트폴리오를 시작하는 데 도움이 되는 웹 개발 프로젝트 아이디어 리스트가 있습니다.

이 웹 개발 프로젝트 아이디어를 시작하기 전에..
웹 앱을 개발하기 전에 HTML, CSS, JavaScript 에 대한 기본 지식을 갖추는 것은 도움이 됩니다. JavaScript Certification 2021은 개발자가 시험을 잘 보기 위해 알아야 할 모든 필수 사항을 검토하기 때문에 시작하기 좋습니다. 인증 받을 계획이 없는 경우에도, 풀스택 개발자는 유사한 학습 가이드를 사용하여 프론트엔드 및 백엔드 애플리케이션을 모두 개발하는 법을 배울 수 있답니다. 이렇게 현실적인 개발 프로젝트 아이디어를 시도하는 것은 간단한 HTML과 CSS에서 React Native와 같은 더 복잡한 기술로 가는 또 다른 방법입니다. 웹 개발 프로젝트를 통해 개발 기술을 쌓을 수 있지만, 웹 앱이 작동하는 방식에 대한 기본 지식은 필요합니다.

기본 웹 개발 프로젝트

1. 1 Page짜리 이력서
 1page 이력서부터 시작하세요. 어차피 필요할지도 모르니까요! 소셜 미디어에 링크를 걸고 기타 웹 개발 프로젝트를 추가하세요. 1page 이력서는 결국 포트폴리오의 저장소가 됩니다. 1page 이력서를 작성할 때, 니즈에 따라 어떻게 확장할 것인지 고려하세요. 자기소개 영상은 어떨까요? 더 자세한 내용을 알고 싶은 인사담당자를 위한 "contact me" 페이지는 어떨까요?

2. 취미 또는 헌정 페이지
당신이 정말 좋아하는 것이 있나요? 취미나 헌정 페이지를 디자인하는 것을 고려해보세요. 취미 또는 헌정 페이지에는 아마도 튜토리얼(취미) 또는 음악(헌정 페이지)과 같은 스트리밍 미디어가 필요할 겁니다. 이미지, 비디오 및 음악을 표시하는 방법에 대해 배우게 되고, 관심 있는 것을 하면서 설계에 대해 더 많이 배우게 됩니다. 만약 당신이 웹 설계하는 것에 지쳤다면, 이미 즐기고 있는 것으로 설계하는 것을 고려해보세요.

3. To-Do 리스트
To-Do 리스트는 당신에게만 유용하지 않을 것입니다. 양식 제출 및 데이터 저장의 기본에 대해서도 소개할 수 있습니다. 백엔드로 진행상황을 저장할 수 있는 To-Do 리스트를 작성해 보세요. 여러 항목을 정렬하고, 다른 우선 순위를 갖고, 목록을 필터링하는 방법을 생성하세요. 다음으로 다양한 CSS 스타일을 시도해 보세요. CSS는 텍스트 상자, 체크 박스, 라디오 박스 등 폼 요소의 모양을 근본적으로 바꿀 수 있습니다. 어떤 스타일이 당신에게 가장 잘 어울릴까요? 어떤 스타일이 최고의 사용자 경험을 제공하나요?



4.워드프레스(WordPress) 사이트
많은 사람들이 워드프레스를 통해 프로젝트를 설계하는 방법에 대해 더 많이 배웁니다. 그리고 워드프레스 지식 그 자체로 인기있는 상품이죠. WordPress.com의 사용법을 이용해 독자적인 사이트를 만들어 연습할 수 있어요. 테마, 플러그인 및 CSS를 커스터마이징 하는 기능에 주의를 기울여보세요.

PHP/MY SQL을 배우고 있다면, 시간을 들여 워드프레스의 코드를 파보세요. 워드프레스는 오픈소스이니까요. 앞으로 워드프레스용 플러그인을 개발하면, 자신의 실력을 뽐낼 수 있는 좋은 방법이 될 수 있어요.


5. 설문지 or 이메일 컨택 폼
데이터 저장을 연습하는 또 다른 방법이 있습니다. 다중 페이지의 설문 조사를 만들고 페이지 간에 상태가 저장되도록 합니다. 결국 이 설문조사가 이메일 또는 데이터베이스에 저장된 데이터를 어딘가에 제출할 수 있는지 확인하세요.
기존 사이트에서 설문조사 또는 이메일을 팝업으로 표시하는 모달팝(modal pop)을 개발하는 것을 고려하세요. 답변을 분석하는 백엔드도 개발할 수 있나요? 막대 그래프를 만들거나, 모든 질문에 대한 가장 인기있는 답변을 표시할 수 있나요?

6. 전자 상거래 랜딩 페이지
이 프로젝트를 위해 웹사이트 전체를 구축할 필요는 없고, 단지 랜딩 페이지만 구축하면 됩니다. 이 웹 프로젝트는 잠재 고객에 대한 기본 데이터를 수집하는 이커머스 페이지를 만드는 방법을 보여줄 것입니다.

랜딩 페이지는 사람들이 "커밋(commit)"하도록 설계되어 있어요. 따라서 이커머스 랜딩 페이지를 개발하는 것은 실제로 사용자 경험의 연습입니다. 사용자들이 어디를 먼저 보는지? 무엇이 그들이 더 읽도록 유도하는지? 페이지를 열고 통계를 확인하세요. 사람들은 페이지에서 빨리 이탈하고 있는걸까요. 아니면 당신이 유도한 것을 하고 있는 걸까요?

중급 웹 개발 프로젝트

7. 로그인 인증 페이지 개발
이는 대부분의 웹 프로젝트를 위한 첫 번째 단계이므로, 빨리 숙지하는 것이 좋습니다. 관심있는 게임 개발이나 이커머스 포털에 유저 로그인 시스템을 만들 수 있어야 합니다. 너무 복잡하게 만드는 것에 대해서는 걱정하지 마세요. 개선된 기능을 위한 더 고도의 웹 개발 프로젝트들이 있으니까요.


8. 간단한 JavaScript 퀴즈 게임
재미있고 쉬운 프로젝트로, JavaScript 퀴즈에 초점을 맞추고 있어요. 온라인에서 질문을 찾거나 마음에 드는 영화나 TV 프로그램 등 좋아하는 것에 대해 질문을 할 수도 있죠. 이 JavaScript 퀴즈는 만드는 만큼 복잡할 수도 있어요.

도전하고 싶다면, 게임의 세션 간 진행상황을 저장되게끔 하세요. 또한 게임 후반부에는 어려운 질문 나오는 질문 랭킹 시스템을 만들 수 있습니다. (얼마나 많은 사람들이 정답을 맞췄는지 따져보기만 하면 됩니다).


9. CAPTCHA를 기존 웹사이트에 통합하기
로그인 인증 페이지로 돌아가서 처음부터 CAPTCHA를 구현하세요. 이것은 기존 웹사이트에서 타사 스크립트를 사용하는 것을 보여주며, 가져야 할 중요한 재능입니다. 오늘날 많은 웹 사이트에서 여러 개의 타사 앱을 사용합니다. 또한 이 방법은 개발자의 설명서를 따르는 데에도 유용합니다.
다양한 유형의 CAPTCHA 서비스를 살펴보고 각 서비스의 장단점을 나열하십시오.
프로젝트의 범위 내에서 타사 애플리케이션의 유용성을 평가하는 연습을 합니다. 그들 중 일부는 수당을 받습니다. 예산에 맞습니까? 직접 유지보수를 할 수 있나요?



10. 플랫폼 웹 게임 개발
게임 개발에 관심 있나요? JavaScript를 이용해 간단한 플랫폼을 설계하고 원하는 대로 수정할 수 있어요. 많은 게임 개발자가 모바일 환경으로 쉽게 이식할 수 있는 웹 앱으로 시작했습니다. 플랫폼을 랜덤화하거나 새롭고 흥미로운 유형의 무기를 만들거나 더 복잡하게 만들어 웹 게임 설계에 문제를 추가할 수 있습니다. 하지만 여전히 우승할 수 있도록 해야 한다는 것을 기억하세요!


11. 개인 블로그나 비즈니스 블로그
당신은 워드프레스로 작업한 적이 있습니다. 이제는 어떻게 하면 그런 것을 스스로 개발할 수 있을지 생각해 볼 때입니다. 사용자가 로그인하는 방법, 기사를 만드는 방법, 게시하는 방법에 대해 생각해보세요. 신뢰할 수 있는 분류학적, 주제 기반 구조를 만들 수 있나요?

블로그를 개발할 때, 도전에 직면하게 될 것입니다. 댓글 시스템을 만들고 있나요? 그렇다면 다른 사용자가 게시물을 "좋아요" 할 수 있나요? 이제 소셜 미디어를 만드는 길로 가고 있어요!


12. parallax를 이용한 웹사이트
parallax가 뭘까요? parallax는 일부 웹사이트가 가지고 있는 3차원적인 모습입니다. 웹사이트 전면, 중간 및 후면 영역이 모두 각각의 속도로 이동함으로써 생성됩니다. parallax를 사용한 웹사이트를 만드는 것은 웹사이트를 역동적이고 매력적으로 만드는 좋은 방법입니다. parallax는 CSS가 매우 잘 작동하는 요소 중 하나입니다. 또한 텍스트를 필터링하거나 이미지를 변경하는 기능 등 CSS의 다른 기능에 대해서도 살펴볼 수 있습니다.


13. 워드 프로세서와 워드 카운터
Word Counter(글자수세기)가 있는 Word Processor(문서편집 소프트웨어)는 유용하기만 한 것이 아니라 최고의 도전입니다. HTML, CSS, JavaScript를 활용해 자신만의 'WYSIWYG(What You See Is What You Get)' 문서 작성기를 개발하세요. 이것은 온라인 코드 편집기를 만드는 좋은 첫 번째 단계이며, 나중에 웹사이트에서 사용할 수 있습니다.
나중에 사용하려면 가능한 한 덜 종속된 상태로 모듈식으로 만들어야 합니다. 워드 프로세서를 완전히 다른 웹 사이트로 분리하는 테스트를 해보세요. 아직도 작동하나요? 왜 그런가요? 혹은 왜 그렇지 않은가요?




14. 앱에서 구글 지도 또는 다른 외부 서비스 사용
Google 지도는 널리 사용되는 타사 API입니다. 웹 사이트 설계 분야에서 경력을 쌓으면서, 많은 API를 사용해야 할 것입니다. 게임이든 날씨 추적기든 Google 지도를 사용하는 응용 프로그램을 만들어 봅시다. Google 지도 설명서를 읽으며 시간을 보내세요. 어떤 가능성이 있을까요? 포켓몬GO와 같은 앱도 구글 맵으로 구축되어 있습니다.


15. 나만의 온라인 코드 편집기
당신의 지식에 대한 진정한 테스트 - 나만의 온라인 코드 편집기와 컴파일러를 개발하세요. JavaScript, HTML 또는 CSS의 경우, 컴파일할 필요조차 없습니다. 웹 사이트에 쌓고 웹 사이트를 "미리보기" 페이지로 로드하기만 하면 됩니다. Syntax highlighting(하이라이트 코딩 소스)는 언어의 작동방식에 대해 자세히 알려 줍니다.


16. 간단한 어드벤처 게임 디자인
텍스트 어드벤처 게임은 게임 개발의 "비즈니스"에 들어가기 시작하는 재미있는 방법입니다. 자바스크립트로 텍스트 어드벤처 게임을 만들어 옛날 게임의 마법을 담아보세요. 만약 여러분이 더 재미있다고 느낀다면, 여러분은 또한 여러분이 스스로 선택한 모험을 시도해 볼 수 있습니다!
여러분의 어드벤처 게임을 시작하고 친구들이 그 게임을 플레이 하도록 하세요. 이제 당신은 품질 보증을 실천하고 있는 겁니다. 그들이 버그를 발견하면, 고치면 됩니다. 이것은 소프트웨어 개발자가 되기 위한 중요한 부분입니다.


17.웹사이트를 모바일 앱으로 만들어라.
이제 여러분의 웹사이트를 모바일 앱으로 만들어야 할 때입니다. 이것은 중요한 기술이며 오늘날 많은 고용주들이 찾고 있는 것입니다. 모바일 또는 네이티브 앱은 종종 웹 사이트와 결합되고 동일한 기술을 사용합니다. 웹 사이트를 모바일 앱으로 변환할 수 있다면 시장성을 두 배로 높일 수 있습니다.

고급 웹 개발 프로젝트

18. 이미지 편집기 개발
이미지 편집기는 복잡하지만 가치가 있습니다. HTML, CSS 및 JavaScript로 만드는 것은 훨씬 더 어려운 일이죠. 하지만 끝날 때쯤이면 JavaScript와 CSS가 화면에 이미지를 렌더링하는 방법에 대해 많이 알게 될 것입니다.


19. 전자 상거래 사이트 구축
이제 처음부터 전자 상거래 사이트를 구축할 때입니다. PHP 및 MySQL의 백엔드 개발을 포함하여 웹을 위한 개발 방법에 대해 더 자세히 알아보실 수 있습니다. e-Commerce 개발자는 트랜잭션(transactions)과 이를 되돌리는 방법, 데이터베이스의 보안을 유지하는 방법, 보안 인증 완료 방법에 대해 배워야 합니다. SEO에 대해 생각하는 것을 잊지 마세요! 웹 개발 외에도 프런트 엔드 개발자는 검색 엔진 최적화의 기본 사항을 이해해야 합니다.


20. 콘텐츠 관리 시스템 구축
만약 여러분이 이 목록에 있는 다른 프로젝트들을 했다면, 워드프레스를 만들었을 것이고, 간단한 블로그를 만들었을 것입니다. 이제 CMS(content management system)를 만들 차례입니다. CMS는 WordPress와 같은 모든 것에 적합한 블로그입니다. 이미 자신에게 맞게 하드 코딩된 블로그가 아닌 완벽한 블로그를 만들기 위해 설계할 수 있는 사이트입니다.
즉, 이 CMS의 모든 요소는 최종 사용자가 쉽게 사용자 정의할 수 있어야 하며, CMS는 다양한 설계 및 설치를 지원해야 합니다.



21. 미디어 스트리밍 서비스 구축 (음악 또는 비디오 스트리밍)
자신만의 유튜브를 만들고 싶으신가요? 넷플릭스요? 스포티파이요? 이것은 미디어 전달 서비스이고, 당신이 생각하는 것보다 더 복잡합니다. 이 웹 개발 프로젝트를 구축하려면 품질과 압축 같은 것들을 고려해야 합니다. 컨텐츠를 보관하고 분류하는 방법을 파악해야 합니다. 사용자는 다른 사용자에게 어떻게 제안을 합니까? 그들은 파일을 공유하나요? 그들은 파일을 저장하나요? 그들은 어떻게 웹사이트 자체에서 추천 아이템을 얻나요? 그들의 취향을 결정할 수 있는 알고리즘이 있나요?


22. 웹 애플리케이션 프레임워크 구축
이제 깊숙히 들어갈 시간입니다. React Native 또는 MVC 컨트롤러와 같은 프레임워크를 사용할 수 있습니다. 하지만 처음부터 자신만의 웹 애플리케이션 프레임워크를 구축하는 것은 어떨까요?

많은 사람들은 바퀴가 이미 존재하기 때문에 바퀴를 재창조하는 데 시간을 낭비하지 말라고 충고하지만, 다른 바퀴를 만드는 것은 실제로 바퀴가 어떻게 작동하는지 이해하는 좋은 방법이 될 수 있습니다. 웹 응용 프로그램 프레임워크가 어떻게 작동하는지 생각해 보십시오. 그리고 당신이 사용했던 것들을 생각해보세요. 무엇을 바꾸시겠습니까?


23. 멀티 팩터 인증 페이지 개발
아마도 보안은 오늘날의 웹 개발자에게 가장 중요한 새로운 기술일 것입니다. 다중 요소 인증 페이지를 설계할 때 인증 서비스의 작동 방식, 보안의 작동 방식 및 향후 사이트 보안 방법에 대해 더 많이 생각하게 됩니다.

오늘날 대부분의 사이트는 기본적으로 다중 요소 인증을 사용합니다. 그들 중 다수는 "마법 링크"를 사용하기 때문에 이메일이나 전화에서만 로그인할 수 있습니다. 다른 사용자는 타사 인증 서비스를 사용합니다. 어떤 경우든, 더 이상 이메일 주소를 사용하는 사람은 거의 없습니다.




더 많은 프로젝트를 진행하기
작업을 마치면 웹 개발자 포트폴리오에 필요한 모든 것을 얻을 수 있습니다. 하지만 그렇다고 해서 프로젝트가 끝난 것은 아닙니다! 항상 새로운 디자인으로 포트폴리오를 구축해야 합니다. 나중에 웹 응용 프로그램을 사용할 때 어떻게 설계할지 생각해 보십시오. 중요한 내용을 변경하시겠습니까? 만약 그렇다면, 어떻게요? 다양한 사이트 설계를 실험함으로써 프로그래머와 개발자로서의 경험을 넓힐 수 있습니다.


자주 묻는 질문
Q.웹 개발 프로젝트를 만들려면 어떻게 해야 하나요?
 HTML 파일을 만드는 것만으로 메모장으로 웹 개발 프로젝트를 만들 수 있습니다. 그러나 많은 사람들이 Netbeans와 같은 IDE를 사용하고 나서 Apache나 Xitami와 같은 서버에 웹 개발 파일을 업로드합니다.

Q. 전형적인 웹 개발 프로젝트는 무엇인가요?
웹 개발 프로젝트는 매우 단순한 것부터 매우 복잡한 것까지 다양합니다. 대표적인 웹 개발 프로젝트는 "블로그"로, "저널 항목"을 위한 여러 페이지가 있는 웹 사이트로, 모두 단일 인덱스에 연결됩니다.

 
✍ 이 글의 원문은 아래에서 읽으실 수 있습니다.
23 Web Development Project Ideas to Build Your Web Developer Portfolio

💙유데미 대표 강사 Angela Yu의 베스트 강의