안녕하십니까, 페어몬트 앰배서더 호텔 서울 리뉴얼 프로젝트의 조장을 맡은 키드캣입니다. 이번 프로젝트를 통해 페어몬트 앰배서더 호텔 사이트를 새롭게 리뉴얼 할 수 있었고, 중간 중간 사소한 실수로 시행착오가 있었지만 첫 번째 조별 프로젝트이자, 전체 페이지 리뉴얼 프로젝트를 무사히 끝마치게(?) 되었습니다. 지금부터 이 프로젝트를 제작하는 데에 있어 어떠한 과정을 거쳤는지에 대해 보여드리겠습니다.
홈페이지 리뉴얼 그룹
디자인 혹은 인터페이스적으로 개선이 필요해 보이는 기존 페어몬트 앰배서더 호텔 사이트 (링크)를 새로운 페이지로 리뉴얼하기!!
인건비 + 점심값 + 전기세 + 학원까지 왔다갔다 하는 교통비 + 인터넷 이용료를 제외한 개인적인 비용은 들지 않았습니다. 굳이 말하자면 월 62,000원씩이나 나가는 어도비 구독료??
넘나 비싼것...😿😿
조원 모집, 리뉴얼 대상 사이트 모색, 계획표 작성, 사이트맵 제작, 와이어프레임 설계, 메인페이지 레이아웃 작업
서브페이지 레이아웃 작업, 메인페이지 시안 디자인, 서브페이지 시안 디자인, html 코딩 시작
디자인 피드백, html 코딩, css 코딩
css 코딩 마무리, jQuery 코딩, Javascript 코딩, 1차 피드백, 코딩 마무리
기획서 제작, 종합 디자인 가이드 제작, 웹 호스팅, 프로젝트 마무리
| Git ID | Nonwhiskerscat | a0im | GONGHYEONMUN | chaerrin |
|---|---|---|---|---|
| Profile |  |
 |
 |
 |
| 지위 | 리더 | 멤버 | 멤버 | 멤버 |
| 역할 | 메인, 호텔 룸 전체, 예약, 그 외 페이지 제작 | 웨딩, 연회, 돌잔치 | 다이닝, 카페, 바, 시설 | 호텔 정보, 스페셜 오퍼 |
웹에 널린 사이트의 종류는 수도 없이 많습니다. 단순히 캐릭터를 소개하는 사이트부터, 빅 데이터를 다루는 날씨 웹까지, 다양한 웹 사이트가 있죠. 그 중에서 저희는 반려동물 웹 플랫폼, 국립 혹은 사립 공원 사이트, 연예인 엔터테인먼트 사이트, 호텔 혹은 리조트 사이트 중의 후보군들 중에서 활용할 수 있는 소스 및 사진이 가장 많은 호텔 사이트를 선정하였고, 그 가운데에서도 대한민국 호텔에서 다섯 손가락에 드는 페어몬트 앰배서더 호텔 서울 공식 사이트를 채택하게 되었습니다.
|
|
|
이미지 1.1 메인 페이지
|
이미지 1.2 Wedding 페이지
|
|
|
|
이미지 1.3 Fairmont Fit 페이지
|
이미지 1.4 Meeting & Event 페이지
|
하지만 다섯 손가락에 들어가는 호텔 치고 페이지의 디자인 혹은 인터페이스가 다른 호텔에 비해 약간 뒤쳐지는 느낌이 있었습니다. 그리고 서비스를 퍼스트로 하고 강점으로 내세우는 호텔 사이트의 명색에 맞지 않게 고객들의 고충을 들어주는 페이지 하나 없었고, 고객의 예약 혹은 마일리지 여부를 확인할 수 없는 로그인 페이지 하나 조차 구비되지 않았습니다. 게다가 호텔 정보를 대거 표현해야 하는 메인페이지에는 간단한 객실 정보 외에는 어떠한 정보도 노출되지 않았고, 그 마저도 Room 페이지와 중복되는 아이러니한 모습을 보였습니다. 그리고 웹 페이지에 전체적으로 애니메이트가 구현되지 않아 인터페이스에 있어 원시적인 모습을 보이고 있습니다.
이러한 모습은 서브 페이지에서도 어렵지 않게 발견할 수 있었고, 룸 페이지와 같은 경우, 호텔이 어떤 어메니티를 제공하고 룸 타입마다 어떤 서비스를 제공하는 지에 대해 전혀 드러나지 않았으며 많은 정보를 요하는 이벤트, 부대 시설과 관련된 정보 또한 다른 호텔 사이트에 비해 미비한 모습을 보였습니다.그래서 저희는 이 호텔 사이트를 생기있고 현대적인 사이트로 리뉴얼하고자 이 프로젝트를 진행하게 되었습니다.
주조색은 베이지색 계열의 밝은 톤의 색을 채택하여 과거와 달리 저채도의 차분한 색이 고급스러움을 상징하는 현대의 트렌드에 맞춰 주조색을 베이지색으로 설정했으며, 기본 베이지색에 명도를 조절하여 현대 도시에 우러나오는 고급스러움을 가미하였다. 그에 반해 강조색은 19~20 세기 고급 호텔의 아이덴티티였던 브라운 계열의 색을 기반으로 명도와 채도를 적절히 조절하여 고져스, 엘레강스한 느낌을 부여하였으며 과거 호텔의 전통을 이어가겠다는 의미를 담고 있습니다. 저희는 주조색과 강조색의 대비를 활용하여 과거 호텔의 전통을 이어가는 세련된 현대의 호텔이 되겠다는 의미를 부여하고자 했습니다. 그리고 보조색은 삼원색에 채도와 명도를 럭셔리하게 변형시켰고, 고급스러운 느낌을 가미시키기 위해 녹색 계열의 색을 황색 계열의 색으로 변경하였습니다.
외형적으로 호텔이 지니고 있는 우아함, 고풍스러운 느낌을 그대로 담은 듯한 LEMON MILK를 메인 폰트로 사용하여 디자인 하였고, 본문 혹은 설명 부분을 담당하는 폰트는 최소한 깔끔하고 가독성이 뛰어난 에스코어 드림를 채택했습니다. Lemon Milk와 같은 경우 상업적으로 이용이 자유로운 에스코어 드림과 달리 상업적으로 사용할 수 있는 폰트가 아니기 때문에 상업적인 목적으로 사용 시 재수가 없으면 경찰 삐뽀삐뽀 🚔 할 수 있으니 이 점 주의 부탁드립니다.
| 명칭 | 모바일 | 데스크탑 |
|---|---|---|
| 디바이스 |  |
 |
| 약칭 | mobile-screen | pc-screen |
| 지원 최소 크기 | 390px | 1400px |
| 비고 | 띄어쓰기 전용 중단점 800px 추가 | |
다양한 디바이스에서 이용 및 열람이 가능하도록 반응형 웹으로 구현을 하였고, 1400px 기준으로 디자인을 달리 하였습니다. 처음에 중단점 4개 잡다 프로젝트가 엎어진 적이 있었고 처음부터 디자인을 다시하여 중단점을 1개로 수정했다는 것은 안 비밀... 그룹 프로젝트 역대급 흑역사...
$(function() {
$('#fullpage').fullpage({
autoScrolling:true,
scrollHorizontally: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchorLink, index) {
if(index==2) {
fadein();
fadeup();
rollingNumber();
}
if(index==3) {
$('#fp-nav ul li a span').css({
'background': '#333',
'transition': 'all 0.5s'
});
}
else {
$('#fp-nav ul li a span').css('background', '#fff');
}
}
});
});메인 페이지에서는 풀페이지 플러그인 2.9.7 버전을 활용하여 디바이스 혹은 화면의 크기에 상관 없이 한 페이지의 사이즈를 디바이스의 스크린 크기와 일치시키도록 하였고, 스크롤을 할 때마다 페이지가 넘어가도록 구현하였습니다. 그리고 afterLoad를 사용하여 유저가 해당 페이지에 도달했을 때, 함수가 발생하도록 하는 인터페이스를 추가하였습니다.
window.addEventListener('load', function(){
var typeText = document.querySelector("h2#type");
var textToBeTypedArr =
[
"호텔의 품격",
"DIGNITY OF HOTEL",
"ホテルの品格",
"飯店的品格",
"qualité hôtelière",
"calidad hotelera",
"deversorium qualis",
"qualità alberghiera",
"Hotelqualität",
"chất lượng khách sạn",
"คุณภาพโรงแรม",
"جودة الفندق"
];
var index = 0, isAdding = true, textToBeTypedIndex = 0;
function goType() {
setTimeout(function () {
typeText.innerText = textToBeTypedArr[textToBeTypedIndex].slice(0, index)
if (isAdding) {
if (index > textToBeTypedArr[textToBeTypedIndex].length) {
isAdding = false
setTimeout(function () {
goType();
}, 2000)
return
} else {
index++;
}
} else {
if (index === 0) {
isAdding = true
textToBeTypedIndex = (textToBeTypedIndex + 1) % textToBeTypedArr.length
} else {
index--;
}
}
goType();
}, isAdding ? 120 : 60)
}
goType();제이쿼리를 남발한 프로젝트이지만 이 부분 만큼은 바닐라 자바스크립트를 활용하였습니다. 호텔의 품격을 17가지 언어로 표현하였고 이를 배열에 저장한 이후 일정 시간이 지나면 차례대로 타이핑 되고 지워지는 효과를 부여하였습니다. 글자가 추가되는 시간 0.12초, 지워지는 시간 0.06초, 타이핑이 끝나 머무는 시간 2초
$('.ins li:eq(1)').addClass('s2-act')//add default class
let clone = $(".ins").clone(true).appendTo('.hidden-box')
let multi = 1;
let classIdx = 2;
slideInter = setInterval(slide, 3000)
function slide() {
$('.hidden-box li').removeClass('s2-act')
let itemWidth = $('.ins li').outerWidth(true)
let itemLength = $(".ins:first li").length;
if (classIdx >= itemLength) classIdx = 0;
if (multi > itemLength) {
multi = 1;
$('.ins').css('left', 0)
}
$('.ins').animate({ 'left': `-${itemWidth * multi++}px` }, 500)
$(`.ins li:eq(${classIdx++})`).addClass('s2-act')
$(clone).children().eq(classIdx - 1).addClass('s2-act')
}해당 페이지 담당자 曰 이미지들을 감싸고 있는 .ins 요소를 복제해 원본 .ins요소 뒤쪽에 붙여 주는 형식으로 이미지의 너비만큼 슬라이드를 반복하며 원본의 마지막 이미지 요소를 지나 복제한 첫 이미지 요소에 슬라이드가 도달하면 원본 요소를 복제한 요소 위치로 변경해 주는 방법으로 슬라이드를 구현하였습니다.
$('.ins li:eq(1)').addClass('s2-act')//add default class
let clone = $(".ins").clone(true).appendTo('.hidden-box')
let multi = 1;
let classIdx = 2;
slideInter = setInterval(slide, 3000)
function slide() {
$('.hidden-box li').removeClass('s2-act')
let itemWidth = $('.ins li').outerWidth(true)
let itemLength = $(".ins:first li").length;
if (classIdx >= itemLength) classIdx = 0;
if (multi > itemLength) {
multi = 1;
$('.ins').css('left', 0)
}
$('.ins').animate({ 'left': `-${itemWidth * multi++}px` }, 500)
$(`.ins li:eq(${classIdx++})`).addClass('s2-act')
$(clone).children().eq(classIdx - 1).addClass('s2-act')
}해당 페이지 담당자 曰 스크롤 이벤트 도중 이벤트로 지정한 요소가 뷰포트 내에 도달하면 true를 반환하고 뷰포트 내에 요소에만 스타일을 변경하여 이벤트가 발생하도록 구현하였습니다. 일반적인 1회성 스크롤 이벤트에 비해 뷰포트에 도달하게 되면 애니메이션이 재구현된다는 것이 어찌 보면 또 하나의 매력인 것 같습니다.
let idPass=/^(?=.*[a-zA-Z])(?=.*[0-9]).{7,25}$/;
let pwPass=/^(?=.*[a-zA-Z])(?=.*[@$%^*-])(?=.*[0-9]).{9,25}$/;
let pCheck=/^(?=.*[0-9]).{10,25}$/;
let nCheck=/^(?=.*[0-9]).{6,6}$/;
let ePass = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
let idCheck=false;
let phCheck=false;
$('.id_id .aconf_btn').on('click', function() {
if($('input#aid').val().length<1) alert('아이디를 입력해 주세요!');
else if(!idPass.test($('input#aid').val())) alert('아이디는 영문 숫자 조합 7자 이상으로 입력해 주세요!');
else if($('input#aid').val().match('nonwhiskerscat')) alert('이미 존재하는 아이디입니다!');
else {
alert('멋진 아이디네요!');
idCheck=true;
}
});
$('.phone_phone .aconf_btn').on('click', function() {
if($('input#aphone1').val().length<1) alert('휴대폰 번호를 입력해 주세요!');
else if(!pCheck.test($('input#aphone1').val())) alert('휴대폰 번호를 똑바로 입력해 주세요!');
else {
alert('인증번호가 전송 되었습니다!');
phCheck=true;
}
});회원가입 페이지와 같은 경우 일반적인 웹 페이지와 유사하게 작동하도록, 각 요소들에 조건을 붙여 유효성 검사를 진행하도록 하였습니다. 예를 들어, 아이디와 같은 경우 영문, 숫자 조합으로 7자를 입력하도록 /^(?=.*[a-zA-Z])(?=.*[0-9]).{7,25}$/와 같은 조건을 걸었습니다. 그 외에 패스워드, 휴대폰 번호, 이메일 등 유효성 검사에 걸맞는 조건을 갖추지 않을 경우 가입이 되지 않도록 구현하였습니다.
호텔의 자부심을 걸고 어딜 가도 명함을 내밀 수 있는 최고의 호텔이 되겠다는 의미를 부여하며 "호텔의 품격"이라는 짧고 강력한 자체 슬로건을 제작했습니다.
아르데코 형식의 로고 위에 페어몬트 앰배서더 호텔의 정 체성을 부여할 수 있는 다양한 요소를 가미 하였고, 단순 히 디자인 보충을 위해 추가했던 네 개의 사각형이 호텔의 품격을 잘 갖춘 호텔이라는 것을 표현하였습니다. 그리고 선형 로고가 적합하지 않은 배경에 대해서 대체적으로 사용할 수 있는 서브 로고도 제작하였습니다.
호텔 그 자체의 강점을 보여주지 못하고 Room 정보만 주먹구구식으로 넣은 기존의 홈페이지를, 풀페이지 플러그인을 활용하여 역동적으로 구현하였고 각 섹션마다 호텔의 다양한 개성을 스토리형식으로 구성하였고 여느 호텔에 견줄 만한 인터페이스를 추가하여 리뉴얼했습니다.
리뉴얼 된 페이지는 각종 웹 사이트에 게재된 리뷰, 블로그 글을 수집 및 분석하여 더 많은 정보를 제공하고 있으며, 애니메이트 혹은 사진 슬라이드를 활용하여 동적 인터페이스를 부여하였습니다. 특히 자세해진 어메니티, 기존 홈페이지에 기재되지 않았던 환불 및 에티켓 안내문, 객실의 위치까지 추가된 것이 이 페이지의 매력이라 할 수 있습니다.
해당 페이지 담당자 曰 기존 홈페이지과 차별된 디자인과 인터페이스를 사용하여 보는 이의 이목을 끌게 하였고 호텔이 지니고 있는 고급미를 돋보이도록 하였습니다. 그리고 소비자가 두 줄의 짧은 텍스트만 보고 예약이 이루어지게 될 때까지의 담겨있는 정보가 부족하다 생각했습니다. 그래서 웨딩 페이지에 부합한 레이아웃과 색상 구성, 그리 고 이미지 정보와 동적인 요소를 추가하여 웹을 리뉴얼 했습니다.
해당 페이지 담당자 曰 기존 사이트의 장황한 텍스트가 가독성을 떨어뜨린다고 생각해 텍스트를 최대한 없애고 이미지를 크게 배치하여 눈에 잘 들어오게 했습니다. 강조되어야 할 텍스트는 기존 폰트 사이즈 보다 더 크게 설정하여 눈에 띄도록 설정하였습니다. 그리고 마우스를 올렸을 때 이미지에 대한 정보가 나오게 함으로써 전체적으로 깔끔하게 디자인하였습니다.
|
페이지 명 | About |
|---|---|---|
| 상세 설명 | 해당 페이지 담당자 曰 기존에 없었던 About Me 페이지를 새롭게 개설하였고, 페어몬트 엠배서더 호텔의 다양한 정보를 파트 별로 배치하여 전 연령층의 사용자가 호텔에 대한 정보를 한 눈에 확인할 수 있도록 하였습니다. 또한, 호텔까지 오시는 길을 아코디언 방식으로 배치하여 깔끔하게 볼 수 있도록 하였습니다. | |
| 링크 | 바로가기 |
|
페이지 명 | 로그인, 회원가입 |
|---|---|---|
| 상세 설명 | 기존에 없었던 로그인 페이지와 회원가입 페이지를 추가하였습니다. 아이디를 입력하지 않았을 때 혹은 비밀번호를 입력하지 않았을 때 아이디 및 비밀번호가 누락되었다는 오류 메시지를, 형식에 맞지 않는 아이디(영문 숫자 조합 7자 이상), 패스워드(영문 숫자 특수 문자 조합 9자 이상)을 입력했을 때 존재하지 않는 회원이라 오류 메시지가 발생하도록 하였습니다. 그리고 형식에 맞는 아이디 및 패스워드를 입력했을 때 로그인에 성공하고 메인 화면으로 돌아가는 인터페이스를 추가하였습니다. | |
| 링크 | 로그인 | 회원가입 |
|
페이지 명 | 호텔룸 예약 |
|---|---|---|
| 상세 설명 | 기존에 외부 플랫폼을 활용하였던 예약 페이지를 자체적으로 제작했습니다. 회원가입, 마이페이지, 정보수정, 고객센터 페이지를 포함한 해당 페이지에는 이 홈페이지의 퍼스널 컬러인 #fefdf0을 적절히 활용하였습니다. 특히 여느 호텔 홈페이지와 달리 아이콘을 사용하여 접근성 부분에서도 다른 홈페이지와 차별점을 두었습니다. | |
| 링크 | 바로가기 |
|
페이지 명 | 고객센터 |
|---|---|---|
| 상세 설명 | 서비스를 중시하는 호텔 사이트에 고객센터 페이지가 없는 것이 어색하다 생각해 해당 페이지를 새롭게 제작했습니다. 본래 홈페이지에 기재된 자료가 미비하였기 때문에 Agoda 혹은 호텔스 컴바인 등을 방문하여 고객의 리뷰 및 평가를 분석하였고 이를 바탕으로 FaQ를 구성하였습니다. 물론 사실을 기반으로 작성되지 않았고 고객을 중점으로 제작되었기 때문에 신빙성은 다소 떨어질 수 있습니다. | |
| 링크 | 바로가기 |
|
페이지 명 | 마이페이지, 정보수정 |
|---|---|---|
| 상세 설명 | 유저의 프로필 혹은, 개인 정보를 관리할 수 있도록 마이페이지&정보수정 페이지도 새롭게 제작하였습니다. 유저들은 마이페이지 섹션에서 프로필 수정, 비밀번호 수정, 회원 탈퇴, 예약 내역 관리 등과 같은 기능을 수행할 수 있고, 정보수정 페이지에서는 유저의 휴대폰 번호와 이메일 주소를 수정할 수 있습니다. | |
| 링크 | 마이페이지 | 정보수정 |
|
|
한 마디 | 철도 기관사가 비행기 조종간을 잡은 상황! | ||
|---|---|---|---|---|
| 소감 | 3개월 전만 해도 Jquery가 세상에 존재한 줄 몰랐던 제가 이 중요한 프로젝트의 조장을 맡았을 때 많은 부담감과 걱정이 저에게 쓰나미처럼 몰아쳤습니다. 이를 극복하고 옳은 방향으로 조원들을 리드하자는 다짐을 했지만 저의 결정적인 실수로 조원 분들이 피해를 봤던 적이 있었습니다. 그 이후로 무능한 조장 아래서 고생하는 조원 분들을 생각하며 매일 15시간씩 프로젝트에 전념하였고, 조원 분들이 난관에 봉착 했을 경우에도 시간을 내서 문제를 해결해 주었는데, 그 의지가 프로젝트를 완성하는 데에 결정적으로 도움을 줬던 것 같습니다. 그리고 저를 적극적으로 따라준 조원 여러분들에게도 감사 인사를 드립니다. | |||
| 개선된 점 |
|
반성할 점 |
|
|
|
|
한 마디 | 머릿속으로 큰 그림을 그리자! | ||
|---|---|---|---|---|
| 소감 | 조별 프로젝트 도중에 시안 작업 단계에서 모바일과 데스크탑의 통일성을 고려하지 못해 시안 대부분을 수정해야 하는 일이 있었습니다. 당장 시간적 여유가 부족한 상황이라 문제점을 고치지 않은 체 스크립트 를 작성하게 될 상황이었지만. 부족한 시간을 핑계로 조원들에게 민폐를 끼치고 싶지 않았습니다. 이후에 좋은 결과를 만들고 싶다는 목표 하나로 잠을 줄이며 프로젝트에 몰두했고 그 목표가 첫 조별 프로젝트를 완성하는 데에 도움을 주었던 것 같습니다. 그리고 프로젝트 중간중간 부족한 모습에도 다그치지 않고 묵묵히 기다려주신 조원 여러분들께 감사드립니다. | |||
| 개선된 점 |
|
반성할 점 |
|
|
|
|
한 마디 | 매일매일이 긴장과 발전의 연속이었다! | ||
|---|---|---|---|---|
| 소감 | 모든 것을 처음 배운 저에겐 조별 프로젝트는 막막했고 걱정이 앞섰습니다. 조원들에게 피해를 끼치면 안 되는데 나의 능력이 그만큼 안된다고 생각했고 과연 내가 잘 끝낼 수 있을까라는 생각을 했습니다. 역할을 분담하고 일정에 맞춰 해나가는데 저는 더욱 더 많은 시간을 할애하며 따라가고자 노력했습니다. 모르는 것은 조원들에게 물어보기도 하고 공부했던 것을 다시 보며 차근차근 해나가면서 저의 실력도 점차 발전 해 나간다는 것을 느꼈습니다. 어렵고 힘든 점도 있었지만 조에 피해를 끼치지 않고 제가 맡은 역할을 무사히 끝내게 되었습니다. 완성작을 보면서 뿌듯했고 한편으로는 더 잘 해내지 못해 스스로에게 아쉬움이 남는 조별 프로젝트였습니다. 많은 도움을 주신 조장님, 그리고 조원들 모두 수고하셨습니다. 감사합니다! | |||
| 개선된 점 |
|
반성할 점 |
|
|
|
|
한 마디 | 시간을 쪼개 잘 활용하자! | ||
|---|---|---|---|---|
| 소감 | 학교 수업과 학원 수업을 병행하면서 생활을 하여 시간적인 여유가 부족하던 저는 프로젝트를 시작하였을 때 걱정이 많았습니다. 시간적인 여유가 부족함에도 불구하고, 욕심만 많았던 저는 무리하게 할 일을 많이 만들어 조원분들이 열심히 작업을 하실 때 제가 여러 번 빠지게 된 적이 있었습니다. 아무래도 이 프로젝트에 시간 투자를 많이 못 한다고 생각했습니다. 제 욕심 때문에 다른 조원들에게 피해를 끼칠 수 없다고 생각이 들었습니다. 그 이후부터 잉여시간까지 모두 쪼개어 프로젝트에 전념하기 시작했습니다. 바쁜 저를 다그치지 않고 기다려주셔서 조원 여러분들께 감사 인사드립니다. | |||
| 개선된 점 |
|
반성할 점 |
|
|
3일차 까지만 해도 대구 그랜드 호텔(링크) 사이트를 대상으로 리뉴얼 프로젝트를 진행하려 했으나, 인터넷에 떠도는 소스 및 사진 자료가 한강에서 바늘 찾기를 할 정도로 없었다. 그렇다고 소스를 구하기 위해 프로젝트 기간 중간 중간에 대구에 있는 호텔까지 내려가면서 모든 룸 타입의 방을 예약하고 답사까지 할 수 없다. 그래서 페어몬트 앰배서더 호텔로 바꾸었다고 한다.
그런데 이 쪽도 자료가 없었다는 것은 안 비밀
여기 게재된 것들 외에 실제 홈페이지에서는 구경할 수 있는 디자인과 인터페이스들이 많습니다. 시간적인 여유가 있다면 웹 페이지 혹은 기획서 페이지를 직접 방문하여 저희 프로젝트를 구경하셔도 좋습니다. 물론 웹 개발자로서 다들 처음 해보는 프로젝트라 예상치 못한 오류도 많이 직면하게 될 것입니다... 이 점 양해 부탁드립니다. 지금까지 페어몬트 앰배서더 호텔 프로젝트의 조장을 맡은 이었습니다. 여기까지 읽어 주셔서 대단히 감사드립니다.