Web Dev/6. Graphics
-
Interactive Website - WebXR 을 지원하는 3D관련 프레임워크들Web Dev/6. Graphics 2021. 5. 30. 22:18
https://wonderlandengine.com/news/top-5-webxr-frameworks-comparison/ Top 5 WebXR Frameworks - Comparison Want to start WebXR development? Here is a comparison of the top 5 frameworks to get you started. wonderlandengine.com WebXR쪽을 심심할때 보고 있는데, 계속 Unity얘기가 나와서 예전에 한번 겨우 굴러가는 게임을 만들었던 추억이 떠올라서 대체 WebXR과 unity가 무슨 상관이 있나 해서 봤다. Unity3D Babylon.js Three.js PlayCanvas A-Frame 이거다 3D 만드는 도구다. Unity를 ..
-
Interactive Website - SVG란 무엇인지Web Dev/6. Graphics 2021. 5. 28. 17:09
이전회사에서 아주 SVG쪽은 회사전체에서 제일 많이 다뤘는데도 불구하고, 아직도 잘 모르는것같아서 이번에 웹에서 SVG를 사용해서 Interactive 하게 만드는 방법을 공부를 해보려고 한다. 특히 전에는 데이터 라벨링을 하기 위해서 좌표의 정보를 저장하는 용도로만 사용했는데, 이번 기회로 SVG를 제대로 이용해보고 싶다. 오늘한 결과물 1. 우선 Illustrator가 이제는 없어서, Figma https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. w..
-
Interactive Website - 3D websiteWeb Dev/6. Graphics 2021. 5. 24. 13:01
Three.js를 사용해서 웹사이트를 만드는 튜토리얼을 해보았다. React app에서 어떻게 하면 mouse 이벤트를 활용해서 3d 애니메이션을 적용하는지 파악할 수 있었다. 동작 화면 큰 흐름 canvas만 처리하는 컴포넌트를 빼고, 그위에 layer를 해주는 부분을 따로 뺀다. canvas는 screen-size에 꽉차도록 구성하고, main은 일반적으로 구성을 하되, absolute 설정을 해서 위에 떠있도록 한다. canvas 컴포넌트에서 mouse scroll 이벤트가 동작하면 카메라 위치를 옮기거나, 물체를 rotate하거나 position을 업데이트해주는 동작을 추가하면 유저의 인터렉션에 따라서 3d 이벤트가 동작하도록 제어가 가능하다. 내 코드 https://github.com/hayou..
-
Interactive Website - 내 프로젝트 템플릿Web Dev/6. Graphics 2021. 5. 24. 12:46
Create-React-App, TypeScript, TailwindCSS를 설정한 템플릿을 가지고 많이 연습하려고 만들었다. https://github.com/hayoung0Lee/Interactive-Website/tree/main/template hayoung0Lee/Interactive-Website Contribute to hayoung0Lee/Interactive-Website development by creating an account on GitHub. github.com 진짜 기본만 나오도록 구성했다. 앞으로 하면서 이 템플릿을 조금씩 업데이트해서 관련한 작업을 할때 필요한 것들을 좀 세팅을 하는 용도로 사용하려고 한다.
-
Interactive Website - Transforms, Transitions, Animations 메모Web Dev/6. Graphics 2021. 5. 23. 22:21
Transforms https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. developer.mozilla.org MDN 문서를 보면 transform을 통해서 translate, rotate, scale and skew를 할 수 있다. 그리고 3d를 기준으로도 할수 있다. Transitions Transit..
-
Interactive Website - Getting StartedWeb Dev/6. Graphics 2021. 5. 22. 22:37
동기 - 우선, 개발자라 코드쪽에 관심이 더 많긴 하지만, 이제는 내가 만드는 서비스가 얼마나 쓰기 편한가를 고민하고 싶고, 좀 쓸만한 것들을 만들고 싶다. - 개발자로 일하면서 느낀건데, css랑 마크업쪽이 생각보다 내 강점인데 이부분을 좀더 살리고 싶은데, 지금처럼 구리게 화면을 만들어내면 잘짜던말던 아무의미가 없겠다는 깨달음도 왔다. - 원래 심리학이나 인지, 교육 쪽으로 공부를 좀더 하고 싶었는데, 그럴 상황은 안되서 고민을 하다보니 내가 할줄아는 개발이 생각해보면 인지, 교육 쪽으로 접목하기가 굉장히 좋을 것 같다는 생각도 들었다. 특히 UI/UX쪽으론 지식이 전무하다고 볼 수 있는데, 이런 지식을 잘 쌓다보면 내가 관심있던 분야도 꾸준히 공부를 할 수 있게 될거라는 생각도 들었다. 오히려 대학..
-
Grid를 사용해봤다. CSS는 어려운 아이이다.Web Dev/6. Graphics 2021. 3. 19. 22:48
내가 하고자했던 것은 아래와 같이 여러줄로 알아서 넘치면서도 첫번째부터 알아서 컨텐츠가 차고, 그다음에 간격은 알아서 적당히 구해주는 것을 구현하고 싶었다(반응형 크기 구하고 하는게, 구현은 할 수 있어도 내가 계획을 잡는게 너무 어려워서...ㅠㅠ 마크업 개발자 및 디자이너분들이 정말 대단하다고 생각하는 부분) 예전에는 그냥 flex로 막했었는데, 이번에는 그렇게 했더니 한개씩 컨텐츠가 넘칠때 이상하게 보였다. 마지막 줄의 컨텐츠가 자기혼자 가운데에 정렬되거나 하는식이었다. 그래서 찾다보니 Grid라는게 있다는 것을 알게 되었고, 아직 잘 이해한 것은 아니지만 내가 원하는 바는 구현할 수 있었다. const CardLayoutWrapper = styled.div` display: grid; grid-te..