생각보다 비디오 관련 문제가 컸기에 따로 글로 정리한다. # 비디오 자동재생 조건 이번에 겪은 상황 별 비디오가 자동재생 되는 조건은 다음과 같다. 1 에 필요한 prop 데스크탑 / 안드로이드 크롬: muted iOS 모바일 사파리 & 크롬: autoplay, muted, playsInline 2. iOS 크롬 추가 사항 js에서 video.play()를 실행할 것 3. 모바일 공통 추가 사항 저전력 모드가 아닐 것 따라서 저전력 모드를 제외한 모든 경우를 커버할 수 있는 코드는 다음과 같다. # 저전력 모드 처리 모바일 저전력 모드에서는 동영상을 재생할 수 있는 방법이 없어보인다. 따라서 저전력 모드일 때를 대비한 fallback을 보여줘야만 한다. 하지만 아쉽게도 브라우저에서 저전력 모드인지를 직접..
끝인줄 알았지? 하면서 나타나는 버그들..... (ㅂㄷㅂㄷ) 웹에서 나타나는 버그들은 이미 거의 다 해결해서 자잘한 오류 수정 정도야 있을 수 있겠다 생각했지만, 역시 오산이었다. 실제 핸드폰으로 웹 사이트를 열어보니 홈 화면부터 안나온다... # 홈 화면 비디오 재생 에러 가장 심각한 문제부터 해결해보자. 근데 신기한 것은 갤럭시에선 또 이문제가 발생하지 않는다. 오직 아이폰에서만 발생한다. 원인은 비디오의 autoplay guide가 OS 별로 다른 것 때문으로 유추된다. 데스크탑 크롬이나 안드로이드에서는 비디오가 muted 설정만 되어있어도 문제가 없지만 ios는 그렇지 않다. 일단 autoplay 속성이 없으면 로드조차 하지 않고, playsInline 속성이 없으면 js에서 play() meth..
어느 새 두 번째 글을 쓴 지 한 달이 되었다. 한달 동안 미국 여행을 하며 틈틈히 이것 저것 만든 결과 드디어 두 번째 버전의 포트폴리오가 완성되었다. https://portfolio-dev-wann.vercel.app/ Seungwan Cho's Portfolio portfolio-dev-wann.vercel.app 확실히 첫 번째 포트폴리오 페이지에서보단 기본 틀을 잡아놓고 진행해서 그런지 완성도가 높게 나온 것 같다. 포트폴리오 페이지 구성 포트폴리오 페이지는 크게 Home, About, Project, Contact 네 파트로 구성되며 추가로 Resume 페이지가 있다. - Home 직접 찍은 타이핑 영상에 react-type-animation을 사용해 애니메이션을 구현하였다. 단순히 영상을 재..
페이지의 세세한 내용을 먼저 작성하고 기능 구현을 하면 내용의 상당수를 갈아엎어야 하는 불상사가 일어날 수 있으므로 기능 구현을 우선 하기로 하였다. 구현할 기능은 언어 선택, 테마 선택, 반응형 세 가지이다. 언어 & 테마의 상태 관리 언어 선택과 테마 선택 정보는 전역적으로 관리해야 하므로 RTK를 사용한다. user preference를 뜻하는 preferSlice에 언어를 뜻하는 lang과 테마를 뜻하는 theme 상태를 추가하고 reducer를 작성하였다. 사용자가 페이지에 다시 방문했을 때나 새로고침을 했을 때 상태가 손실되지 않도록 상태 변경 시마다 localStorage에 해당 정보를 저장하도록 구현하였다. 언어 선택 언어 선택은 nav bar 우측의 언어 선택 버튼을 클릭하여 토글되는 방..
UI Design 이번 디자인 컨셉은 'Neumorphism'으로 정했다. 간혹 SNS에서 웹 디자인 관련 게시글이 추천되는데, 그 중 눈길을 사로잡는 디자인이 있어 찾아보니 이런 이름을 가졌다는 것을 알게 되었다. Neumorphism은 나름의 장단점이 있으나 포트폴리오 페이지를 만드는데는 장점이 더 크게 작용할 것이라 생각되어 사용하기로 하였다. Neumorphism Neumorphism의 대표적인 이미지이다. 특징이라면 단순한 색 구성에 더불어 버튼이나 카드가 단순히 배경에서 떠있는 것이 아닌 배경으로부터 솟아오른 듯이 보이는 것이다. 이는 좌상단과 우하단에 서로 다른 두 가지 box-shadow를 적용하여 구현할 수 있다. Neumorphism은 skeuomorphism과 flat design..
지난 8월 경 포트폴리오를 한 차례 만들었지만 아쉬운 점이 있어 다시 만들고자 한다. 그 전에 먼저 지난 포트폴리오에 대한 회고를 진행하자. 지난 포트폴리오의 문제 먼저 페이지 자체에 대해 아쉬웠던 점은 다음과 같다. 명확한 디자인 컨셉의 부재 포트폴리오를 만들고자 하는 의지는 있었으나 디자인에 대한 컨셉은 없었다. 따라서 그 때 생각나는대로 디자인을 짜다보니 전체적인 통일감도 떨어지고 디자인 공부를 해보지 않은 사람이 만든 예쁘지 않은 페이지 구성이 되어버린 것 같다. responsive하지 않음 처음에는 웹에서만 보여줄 생각을 했기에 따로 반응형으로 짜진 않았다. 하지만 내 포트폴리오 페이지를 볼 사람이 항상 브라우저를 화면에 꽉 차게 띄워놓고 본다는 보장도 없다. 심지어 모니터 크기가 작으면 페이지..
