---

Work In Progress | Aug 24

---

위스타벅스라고 이름 붙인 과제, 페이지의 일부만 클론하는 주간 프로젝트를 진행중이다.
원하는 화면과 기능을 구현하는 과정에서 느낀 점을 남기기 위해 아래와 같이 기록

진행 중인 페이지 #1

제품 상세 페이지 (비 반응형)

음료 제품 상세 페이지를 구성하고 있다. *타벅스 홈페이지에서 HTML 구조를 아주 많이 참조했다.배꼈다 그 홈페이지를 제작한 분이 어떤 기준으로 태그를 구획했고, 클래스 네이밍이나 태그 선택하는 스타일을 따라하면서 많이 배울 수 있었다.

<dl> <dt> <dd> 같은 생소한 태그들은 제품의 정의, 간단한 설명을 위한 태그로서 적절해보였다. 그리고 각 섹션별로 wrap이라는 클래스 명을 사용하는데, 레이아웃을 위한 구획을 위에서부터 묶어 나가는 방향성을 엿볼 수 있었다.

CSS가 사라지더라도 문맥상 어색하지 않도록 <li>를 잘 사용하고 <input> 옆엔 꼭 <label>을 붙여 수식해주는 것이 바람직해 보였다. 만약 <h1> 같은 중요한 헤더 태그가 이미지 로고를 사용하더라도 글자를 화면 밖으로 들여쓰기를 해서라도 텍스트는 남기는 것을 볼 수 있었다.

기법적인 면도 배울 점이 많았다. <a> 태그가 단독으로 쓰이지 않고 <li>나 <div> 같은 block 요소 내부에 자리를 차지하는 것도 눈여겨 볼 만 했다.

타인이 쓴 코드를 보고 곰곰히 생각하는 시간을 갖는것이 좋았다. 제품 영양 정보는 제출하는 것도 아닌데 왜 <form> 태그를 썼을까 지금도 고민하고 있다.

그 밖에 웹 표준을 고려한 수 많은 속성들 예를 들어 title이나 꼭 빼먹지 않고 넣은 alt를 보면서 모든 요소들은 의미가 명시되어야 하며 꼬리표를 달아주는 것이 중요하다는 것을 배웠다.

---

구현중인 기능들

이미지 확대 기능 🔎

다른 기능과 다르게 이건 실제 *타벅스 홈페이지에 구현된 기능 중 하나이다. 마우스 오버(혹은 무브) 이벤트로 이미지를 돋보기로 확대해서 보는 듯한 경험을 준다.

뷰포트의 크기가 달라지더라도 마우스와 타겟 프레임의 좌표 값 간의 연결 고리를 찾아가는 점이 어려웠다. 마우스를 따라다니는 확대창의 테두리가 프레임 바깥을 벗어나면 안되고, 옆의 확대 이미지도 여백이 보이면 안된다. 이 부분은 이번 주 내로 해결 방법을 찾아 구현해볼 예정이다.

자바스크립트는 객체지향적이기 때문에 모든 것은 반환되는 객체의 프로퍼티만 파고들면 답이 나온다. 내가 찾는 답은 getBoundingClientRect과 Mouse Event 프로퍼티 간의 상관 관계 속에 분명 있을것이다. 내가 못찾아서 그렇지 하다보면 다 될 것이다.

마우스 커서가 움직일 때마다 수 없이 이벤트가 호출되어서 성능 저하가 우려된다. 쓰로틀링이란 개념을 배웠으니 FPS가 떨어지더라도 이벤트 인식 주기를 의도적으로 낮출 필요가 있다.

아래는 구현 중간 과정

---

좋아요 - 마이크로 인터랙션 ❤️

나는 마이크로 인터랙션을 좋아한다. 아주 작은, 예상 못한 부분에서 사용자와 교감하려는 모습이 친근감을 주는 것 같다. 아래에 구현한 좋아요 인터랙션은 체크박스 인풋을 활용한 예제를 가져와서 넣어보았다.

남이 만든것을 뜯어보고 이해해서 다시 재조립하고 응용하여 새로 만드는 것을 역설계(Reverse Engineering)라고 한다. 개발 도상국은 선진국의 기술을 가져와 역설계 방식으로 자신만의 기술을 터득한다고 한다. 좋게 말해 역설계고 나쁘게 얘기하면 배끼는 거지만 배움을 위해 많이 하고있는 중이다.

구글링으로 찾아낸 '좋아요' 클릭 인터랙션은 플립북(flip book) 애니메이션의 원리를 차용한 것이다. 애니메이션 프레임을 옆으로 길게 나열한 긴 그림을 뒤에 숨겨놓고 애니메이션이 작동할때 프레임이 왼쪽으로 움직이면서 각 프레임이 순차적으로 보여 하나의 연결된 동작으로 보이는 것이다.

---

댓글 입력 기능 + 최소 글자수 Validation ⌨️

요즘 Validation 예제를 많이 마주하게 된다. 원래 과제에서는 글자 수 제한은 없었지만 현실 세계에선 있을법해서 넣어봤다. 숨겨진 요소가 나타나면서 애니메이션이 동작하는 것은 항상 헷갈리는 것 같다.

텍스트의 오버플로우를 가리고, 길어지는 부분은 점으로 남기는 기법은 *타벅스 홈페이지를 뜯어보면서 배웠고, 댓글이 많이 달려서 레이아웃이 깨지는 것은 죽어도 못보겠으니 스크롤을 넣기로 해봤다.

클린 댓글을 위해 욕설, 어뷰징 방지도 생각해봤는데, 대조해야 할 욕설들이 담긴 객체나 배열을 차마 과제로 제출할 순 없을 것 같았다.

---

진행 중인 페이지 #2

제품 리스트 페이지 (반응형)

반응형 홈페이지는 같은 홈페이지를 여러개 만드는 것 같은 노동감을 선사한다.
더군다나 아직 미숙한 flex 속성을 활용해서 만들려니 머리가 아프다. 과거의 문제점을 해결하고 사람을 더 편하게 해주기 위해 새로운 기능들이 나오는 것일텐데, 어쩜 배우면 배울수록 더 꼬이고 복잡해지는 기분이 든다.

스타벅스는 브랜드 가이드가 확실하기 때문에 무난하면서도 고급스럽다. 특히 어두운 암녹색의 배경과 커피 색의 배색 + 베이지 톤온톤은 너무 깔끔하다. 홈페이지 디자인은 사진이 80% 다 해먹는 것 같다.

미디어 쿼리에 익숙해지려 노력하고 있다.

ⓒ Wonkook Lee
참고한 해당 홈페이지의 리소스와 음료 사진의 모든 저작권은
스타벅스 코리아에게 있으며 문제가 생길 시 즉시 조치하겠습니다.

🙏🏻 잘못된 정보가 있다면 지적해주세요