대구AI스쿨 실무 프로젝트

제작 사이트 링크 : http://hangdongkinder.com/

약 한 달 간의 대구AI스쿨 마지막 실무 프로젝트가 9월로 끝이났다. 개발자로서의 첫 발자취라 할 수 있는 이번 프로젝트에 대한 진행 과정을 기록해 보고자 한다. 😚

📕 프로젝트 개요

• 프로젝트 명칭 : <구로 항동 발도르프 킨더교육원> 사이트 구축
• 사이트 목적 : 기관 홍보
• 총 개발기간 : 21년 9월 6일 ~ 21년 9월 27일

📙 웹 개발 스터디

참고 :
(1) http://plandas.kr/ui-ux-design/uxui-5/
(2) http://fureweb.com/web-development-process-from-planning-to-deploy/

일반적으로 웹 사이트 구축은 크게 기획, 디자인, 퍼블리싱, 개발이라는 4단계를 거쳐서 진행된다.

요구분석 > 기획 > 디자인 > 퍼블리싱 > 개발 > 테스트 > 디버깅 > 오픈

이러한 단계를 기준으로 클라이언트와 프로젝트 진행자와 Kick off Meeting(프로젝트 구축 시작 미팅)을 시작으로 기획자, 디자이너, 퍼블리셔, 개발자의 협업을 통해 프로젝트가 진행된다. 일반적으로 일정에 따라 각 분야별로 겹쳐지면서 병행하여 진행되며 클라이언트의 요청에 의해 다양한 변수를 가져올 수 있다.

기획

일반적으로 계약을 통한 개발을 진행하게 된다면 클라이언트와의 미팅 후 요구사항을 정리하여 어떤 기능들이 존재해야하며 어떻게 사용자에게 보여져야하는지 정의하는 시기를 거치게 된다. 이때 화면, 기능, 프로세스 및 데이터베이스 등을 설계하게 된다.

사이트맵 작성 -> 화면설계(스토리보드) -> 화면별 프로세스 설계 -> 데이터베이스 설계

디자인

화면이 설계되고 페이지 범위가 확정되면 front-end라고 하는 사용자가 보는 페이지를 전부 제작한다.

웹사이트 전략에 따른 디자인 컨셉을 수립하고, 다양한 미디어와 시각적 요소를 활용하여 디자인 시안을 제작하며 클라이언트의 컨펌과정을 통해 완성해간다. 기획자와 원활한 소통을 통해 클라이언트와 사용자 입장을 고려하여 UX/UI 전략을 수립하고 컨셉을 설정한다. 이를 통해 시안을 제작하고 확정이 되면 실제 디자인을 진행한다. PC웹, Mobile웹 등의 범위에서 적응형, 반응형, 하이브리드 형으로 사용성을 고려하여 제작한다.

퍼블리싱

완료된 UX/UI 디자인을 HTML페이지로 코딩하는 과정 (디자인된 이미지를 실제로 웹 프로그램에 사용할 수 있도록 코딩을 해 주는 직군) 실제로 웹에 적용되는 표준을 잡아주는 직업이므로, HTML, CSS, 자바, 웹 표준, 웹 접근성, 심지어는 웹디자인에 대한 폭넓은 이해가 필요하다.

개발

개발단계는 웹을 구현하는 전문적인 프로그램 개발자가 진행하며 PHP, ASP, JSP, JQuery, Javascript 등 다양한 언어로 제작되어 진다. 기능 구현 등

📒 기획 단계

우리팀은 '구로 항동 발도르프 킨더교육원'을 담당해 기관 홍보 페이지를 제작하도록 요청받았다.

2주라는 짧은 개발기간과 백엔드 구현의 한계로 인해 전체 코딩을 하는 것이 아닌, 웹빌더를 이용한 작업을 진행하기로 했다. 따라서 가장 먼저 사이트 제작에 쓰일 웹빌더를 선정했다. 처음에는 공부한 HTML, CSS, JS를 많이 다룰 수 없어서 아쉬웠지만, 클라이언트 측에 전문가가 없어 사후 관리를 위해서라도 웹빌더를 사용하는 편이 나을 것 같다고 판단했다.

전달 받은 기획서에 간략한 홈페이지 레이아웃이 있어서 사이트맵과 스토리 보드를 우선 제작했다.

후에 기능 요구사항 정의서를 작성해 클라이언트 측에게 게시했다.

📗 디자인·퍼블리싱·개발 단계

웹빌더를 사용했기 때문에 위의 모든 단계를 통합해서 진행했다.

디자인을 담당하는 전문가가 따로 없었기 때문에 로고는 텍스트로 간단하게 삽입하였고, '유치원'과 '무지개'의 테마를 기본으로 잡고 산뜻하고 발랄한 분위기의 컨셉을 방향으로 잡았다. 또한 전체적으로 작업한 뒤 클라이언트에게 반복적으로 피드백을 받으며 수정해나갔다.

전체 폰트 서체 적용은 HTML과 CSS를 이용해 작업해 주었다. @font-face지시어로 사용할 웹폰트들을 호출하고, 개발자 도구를 이용해 각 요소의 클래스명을 찾아 속성값을 주었다.

<style>
 
 /* 웹폰트 호출 */
 @font-face {
   font-family: 'Yuni_ddingddang';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/Yuni_ddingddang.woff') format('woff');
	font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Bareun_hipi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Bareun_hipi.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Mingyung';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/Mingyung.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SlowSlow';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/SlowSlow.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Amsterdam';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Amsterdam.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'White_angel';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/White_angel.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

 /* 폰트 적용 */
 /* 로고 */
 .doz_sys #logo_w20210914f4117f905bcd5.logo .logo_title a {
	font-family: 나눔 손글씨 백의의 천사, White_angel;
	font-size: 77px;
 }
 
 .inline-col-group {
   overflow: visible;
   text-overflow: unset;
	 white-space: nowrap;
 }
 
 /*모바일 로고*/
 .doz_sys #logo_w202109143cf3f9f8faa58.logo .logo_title a {
   font-family: 나눔 손글씨 백의의 천사, White_angel;
   font-size: 37px;
	
	display: flex;
	flex-wrap: nowrap;
 }
 
 /* 상단메뉴 및 서브메뉴*/
 #w20210914f39aca5df7dc5 .viewport-nav {
	font-family: 나눔 손글씨 백의의 천사, White_angel;
 }
 
 #w20210914f39aca5df7dc5 .viewport-nav > li.dropdown > .notranslate a, #w20210914f39aca5df7dc5 .viewport-nav > li.dropdown > a {
   font-size: 26px;
   font-weight: bold;
 }

 #w20210914f39aca5df7dc5 .dropdown-menu {
   font-size: 22px;
	font-weight: bold;
 }

 /* 모바일 상단 메뉴 및 서브메뉴 */
 .mobile_carousel_nav .nav-item > a {
   font-size: 22px;
	font-family: 나눔 손글씨 백의의 천사, White_angel;
	font-weight : bold;
 }
  
 .mobile_carousel_nav .mobile_nav_depth {
	text-align : center;
 }
 
 /* 킨더소개 왼쪽 메뉴바 */
 #w20210914f55ab45c8a159 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914a8dedae817be5 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914bcd79fe66f9c9 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914aa5cfd410d744 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091493fe48dd07f7a .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 교육과정 왼쪽 메뉴바 */
 #w20210924c835367293320 .nav li a {
   font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
}
 
 #w20210915521aedf839750 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210915e63148a6ee74c .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w202109150d6fca91b5328 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 킨더소식 왼쪽 메뉴바 */
 #w2021091583a5354cb1e97 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091535095b3c9f776 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091566d274b94d5a7 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 입학 왼쪽 메뉴바 */
 #w2021091672d937a4958b8 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091618c3f69fd7055 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }


/* 배너 폰트 */  
h4.banner {
 font-family: Bareun_hipi !important;
   font-size: 50px;
   line-height: 1.2;
}

p.banner-txt {
 font-family: Bareun_hipi !important;
 font-size: 37px;
}

span.author {
 font-size: 29px
}

</style>

pc버전으로 작성해 자동으로 제작된 모바일 버전의 일부 레이아웃이 틀어지는 현상이 발생해, 모바일 버전의 틀어지는 요소들을 제거하고 모바일 버전으로만 새로 삽입하였다.

📘 디버깅 단계

1. '교육활동 > 리듬활동' 페이지에 overlay로 삽입한 아이콘의 크기 축소

웹빌더에 내장된 기본 위젯으로 마우스 hover 애니메이션으로 아이콘을 삽입했으나, 아이콘의 크기가 전체 이미지를 덮을 만큼 커져서 줄어들지 않았다. background-size: 100px !important;를 삽입해 고정해주었다. 동일 클래스에 다른 background-size의 영향을 받고 있어서 그랬던 것 같다.

<style>

/* 교육활동 hover 이미지 설정 */
.hover_img{
  position: relative;
  margin: -270px auto auto; 
  width: 270px; 
  height: 270px; 
  background-image: url(&quot;https://cdn.imweb.me/thumbnail/20210927/e55db235cbfac.png&quot;);   
  background-size: 100px !important; 
  background-repeat: no-repeat;
  background-position: 50% 50%; 
  top: 0px;   
  left: 0px;
}

</style>

2. pc버전에서 모바일 버전으로 브라우저 사이즈 축소시, 텍스트로 삽입한 로고 틀어짐

• 1차 수정
  min-width, display: flex;, flex-wrap: nowrap;을 적용했으나 먹히지 않음

• 2차 수정
  flex-wrap: nowrap이 먹히지 않는 이유가 display: table-cell;일 것으로 추정, 가장 하위 클래스를 찾아 아래 값을 삽입

.inline-col-group {
overflow: visible; text-overflow: unset; white-space: nowrap;

=> 디버깅 완료

📚 Review

프로젝트 전체 소스 : 💾

처음해보는 웹 개발을 웹빌더로 작업한다는 것이 처음에는 마냥 당황스럽고, 3개월간 공부했던 코딩 요소들을 자유롭게 활용할 수 없다는 것에 불만이 많았다. 하지만 결국 웹개발에 있어서 최종 목표는 클라이언트가 해당 사이트를 잘 이용할 수 있게 하는 것이고, 내 실력을 뽐내는 장이 아니라는 것이다. 백엔드를 배우지 않은 나의 한계점을 인정하고 클라이언트의 요구사항에 맞게 개발 기간안에 작업을 끝마쳐야 한다는 것이 최우선사항이라는 것을 이번 프로젝트를 통해 깊이 깨달았다.
또한 웹빌더를 사용하는 과정에서 오로지 마우스로 드래그앤 드롭을 한것만이 아니라, 개발자 도구를 이용해 해당 기능을 어떻게 구현했는지를 면밀히 살피면서 오히려 자습이 되었다. 실제로 웹빌더를 이용해 사용은 하지 못했지만 Github 브랜치를 공부해 개발자들이 협업하는 방법을 익히기도 했다. 결과적으로 해당 프로젝트를 맡은 팀들 중에 우리팀의 사이트가 선정되었고, 프론트엔드 개발자로서 한 단계 성장한 것 같아 뿌듯하다.