패스트 캠퍼스 프론트엔드 과정을 참여하면서 html과 css를 이용하여 스타벅스 메인 페이지를 클론 코딩하는 시간을 가졌습니다.
팀원은 총 4명으로, 전체적인 레이아웃을 각자 접해보자라는 생각으로 메인 페이지의 전체적인 레이아웃을 개별적으로 클론 코딩하는 시간을 가졌습니다.
후에 각 섹션별로 역할을 분담하여 웹 접근성 지침에 맞추고 유효성 검사를 통해 나오는 오류는 수정하면서 코딩을 진행했습니다.
웹 접근성 지침 2.1에 나와있는 지침 항목 하나하나 맞추어서 개발하였습니다.
스타벅스 메인 페이지에도 meta 태그를 사용했지만, 사용자의 검색 결과에 영향을 미치는 <meta name="description">이 사용되지 않았습니다. kewords 값도 사용되지 않았지만 현재 구글에서 kewords 값이 검색에 영향을 미치지 않는다고 선언하였기 때문에 여기서 제외시켜도, decription 값은 사용자에게 홈페이지의 용도 혹은 간략한 정보를 전달해주어 클릭률을 높일 수 있기 때문에 저희는 description 값을 사용하였습니다.
또한 opengraph를 사용하였는데 twitter의 opengraph는 빠져있어서 추가해주었습니다.
스킵네비게이션의 경우 각 섹션별로 바로 접근이 가능하도록 리스트를 추가해주었습니다.
pc 화면에서 검색바 옆에 불필요하게 햄버거 메뉴에 포커스가 가는 오류가 있습니다. 저희 팀은 pc 고정형으로 개발하였기 때문에 햄버거 메뉴 버튼을 마크업에서 제거함으로써 해결했습니다.
또한 검색바의 마크업 순서가 인풋에서 검색 버튼으로 순이 아닌 거꾸로 되어 있는 오류가 있습니다. 이에 마크업 순서를 수정하였습니다.
또한 가장 위에 있는 리스트(sign in, my starbucks 등의 콘텐츠 라인)를 vertical bar로 구분을 시켰는데 vertical bar와 배경의 명암대비가 낮아 잘 안보이는 문제가 있습니다. 이에 vertical bar의 색상을 #555로 수정하였습니다.
검색 영역이 문단을 의미하는 p 태그로 감싸져 있는 것을 form 태그를 사용하여 마크업을 수정했습니다.
텍스트가 이미지로 사용자에게 제공되고 있다는 문제점이 있습니다. 만약 확대를 했을 떄 해상도가 깨지는 문제를 야기할 수 있고, 이미지의 경우 사용자의 검색어에 영향을 줄 수 없습니다. 이에 html 텍스트로 사용자에게 제공하는 것으로 수정했습니다.
stay chill stay playful 배너의 경우 음료를 클릭하면 해당 음료의 정보를 볼 수 있는 페이지로 이동하게 되는데, 이미지가 겹쳐있어서 라임 음료를 클릭했는데 멜론 음료의 정보 페이지로 이동하게 되는 오류가 있습니다. 이에 라임음료와 멜론 음료의 겹치는 공간을 최소화하여 사용자에게 편의성을 높혀주었습니다.
footer 부분에서는 마우스를 올렸을 때 좀 더 선택한 콘텐츠를 구별을 할 수 있도록 언더라인을 추가했습니다.
스타벅스 메인 페이지의 경우 div로만 아웃라인이 그려져 있는데, 저희는 의미를 갖는 태그들을 사용하여 상황에 맞게 마크업을 수정해주었습니다.
처음에 홈페이지를 봤을 때 금방 만들 수 있겠다라는 생각을 했는데, 오만한 생각이었다는 것을 알게됐습니다. 처음에 마크업을 할 때 어떤 태그를 사용해야되는지, 이 태그를 사용했을 때 그 의미적으로 맞는 태그인지 생각하고 확인하는 시간이 길었습니다. 또 header 영역을 만들 때는 처음 접해보는 레이아웃이라 당황하고 오랜 시간을 빼앗겼었습니다.
그래도 조원들 모두 각자의 역할을 잘 해주고 커뮤니케이션 부분에서 막힘없이 이루어진 덕분에 프로젝트가 무사히 완성될 수 있었습니다. 프로젝트 기간동안 힘을 같이 밤을 새가면서 서로 힘을 불어넣어준 팀원들에게 너무 고맙고, 팀 프로젝트에 대한 재미를 알게된 계기가 됐습니다.
그리고 개인적으로 HTML과 CSS 관련해서 정말 쉽고 간단하다는 생각을 갖고 있었는데, 한낱 병아리만도 못했던 것 같습니다. 앞으로도 끊임없이 HTML과 CSS 공부를 해나가야겠습니다.