[Dev Log] UI: Experimental - 영상을 보는듯한 사진

### 1. 부담이 가지않는 역동성
- 프로젝트가 막 시작된 직후, 아직 기획단계일 때 UI제작하던 도중 고민했던 부분이다.
- 우리가 기획한 사진다이어리는 다이어리이지만 사진에 힘을 실었다고 볼 수 있다. 이용자는 딱딱한 다이어리 느낌보다는 인스타그램과 같은 가벼운 SNS를 사용한다는 느낌을 살렸다.
- 더군다나 작성했던 글들은 100% 사진만으로 리스트를 나열해주는 방식을 채택했는데 깔끔하고 눈에 부담을 줄여준다는 큰 이점이 있지만 자칫 너무 빈약한 콘텐츠로 보일 수 있다.
- #### **_이후 사진에 메타데이터도 담는다는 설정이 추가되지만 앞으로 다룰 내용들은 최초 기획당시를 기준으로 작성_**
- 적당한 애니메이션 효과를 부여함으로서 이를 해결할 수 있을거라 생각은 했지만, 언제나 그렇듯 **_적당한_** 이 젤 어렵다. 몇몇 서비스들을 둘러보며 참고할만한 것들을 찾아나섰다. 내가 생각한 적당한 애니메이션 효과의 기준은

1. 눈에 피로를 주지않는 정도의 애니메이션 효과(시선처리가 불편 해서는 안됨)
2. 사진만 보여준다는 매우단순함을 메꿔줄 수 있는 정도의 존재감을 가지는가
3. 유저의 흥미를 일으킬 수 있을만한가

- 그 중 눈에 딱 들어온것이 **_airbnb의 체험둘러보기_**


- 일단 내가 정해둔 기준에 완전히 부합했다. 확실히 대기업은 다르구나 싶었다.
- 심지어 분명 사진인데 영상을 보는듯한 느낌과 내기억도 아닌데 뭔가 떠오르려고 하는 알 수 없는 느낌도 들었다.
- 아무튼 기회가 된다면 한번 시도해보고 싶었다.

---

### 2. 그런데 이거 어떻게 만들지?
#### _여기서부턴 오늘_

- 어쩌면 당연한 것은 만드는 법을 모른다는 것이었다. 어떻게 구글링 해야할지도 막막하고 사실 누군가만들어둔게 있다한들 막무가내로 따라 하고 싶지는 않았다.
- 이왕 이렇게 된거 늘하던대로 삽질한번 해봤다. 이번에 내가 선택한 삽질은 해당 부분을 개발자도구를 직접 까보고 대체 무슨일이 벌어지는지 살펴보는것이다. **_셜록홈즈가 항상 하던말이 자신은 그저 남들보다 관찰을 잘할뿐이라고.._**
- 아무튼 개발자 도구를 열고 찾아봤는데, 생각보다 엄청 깊고 복잡하게 돼있었다. 역시 삽질은 깊게 파는 맛인가?
- 수차례 시도 끝에 해당부분를 찾았고 재밌는것을 발견했다.


- 움짤을 보면 알 수 있듯이 사진의 클래스가 일정한 텀을 두고 계속 변화하고, 사진의 크기자체가 변화한다.
- 처음으로 시도한 방법은 이미지를 불러오고 width와 height를 키우고 애니메이션 효과 주기이다.
- (단순히 내가 재대로 안한걸지도 모르지만)이미지의 크기가 변화하지만 꿈틀거리는 현상이 일어났다.
- 다음으로 시도한 방법은 backgorund-size를 키우는 방법이다. 이 방법은 바로 떠오른 것은아니고, 다른 컴포넌트 작업을 하려고 CSS를 구글링하던 도중 여기에 적용하면 될거같다는 생각이들어서 바로 적용해봄.

```CSS
/* styled-components 사용중 */
background: url(${props => props.imageSrc || null});
background-size: 100% 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
transition: 1s;
border-radius: 20px;
&:hover {
transition: 3s;
background-size: 110% 110%;
}
```
- background에 url로 사진을 불러온뒤 size 100%를 맞춘다 그다음 position을 중앙으로 정렬시키고
- hover 이벤트에는 그냥 size만 키워주는 방식
- 한가지 확실한건 이 airbnb에서 이 방법으로 한건 아닌거같다.(난 개발자도구에서 봐도 크기가 변하지않는다..)
- 일단 내가 원한 느낌을 살렸기때문에 괜찮은 시도라고 생각한다. 팀회의시간에 상의해보고 쓸지말지 정해봐야겠다.

### 3. 적용후