Hacker News 의견들
-
며칠 전에 이걸 만들었음
처음에는 CSS에서 피사계 심도를 ‘가짜로’ 구현해보려고 만들었고, 데모 영상과 shuding_에게서 받은 영감은 사이트 하단 링크의 끝에서 두 번째 트윗에 있음
그런데 어젯밤 ThreeJS가 있다는 걸 떠올려서 react-three-fiber로 다시 작성했고, 처음 써봤는데 굉장히 인체공학적으로 잘 되어 있어 인상적이었음
문서화는 안 했지만, 오른쪽 클릭 드래그로 화면 이동 가능함- 멋짐. 나도 Shuding에서 영감을 받아 CSS 기반 가짜 피사계 심도를 만들었음 :)
https://depth-of-field.vercel.app/ - UI의 상호작용성이 마음에 듦. 잘 만들었음
문서화되지 않은 기능도 확인됨. macOS에서 ctrl+왼쪽 클릭으로도 이동이 안 되는 이유는 좀 의아함
- 멋짐. 나도 Shuding에서 영감을 받아 CSS 기반 가짜 피사계 심도를 만들었음 :)
-
OS와 연동해서 창 합성기 이전 단계의 3D 스크린샷을 찍고, 각 창에 Z 깊이를 부여해 바탕화면과 서로의 위에 떠 있는 식으로 만들 줄 기대했음
이런 “3D 스크린샷”을 직교 투영으로 보면 일반 스크린샷과 똑같아 보이다가, 피사계 심도 효과를 넣는 순간 차이가 드러날 것 같음
물론 다른 투영으로 보거나, 여기처럼 3D 공간에서 기울이거나, 먼 창에 안개를 적용하거나, 점광원으로 창들이 서로 실제 그림자를 드리우게 하는 것도 가능할 듯함. 반투명 영역은 빛이 더 통과하게 만들 수도 있고, 이상적으로는 HTML5에 임베드 가능한 뷰어가 이런 기능을 다 해주면 좋겠음
이런 형식과 뷰어는 visionOS의 깊이 매핑된 AR 창 배치를 정적인 “둘러볼 수 있는” 스냅샷으로 재현하는 데 꽤 분명한 용도가 있어 보임. 2D 데스크톱 OS의 창에 임의의 깊이 맵을 붙일 수 있다면 그건 덤이고- 이와 가장 비슷하게 본 건 Xcode의 UI 디버그 뷰어임. 모든 UI 요소를 분해도처럼 3D 공간에서 회전해 볼 수 있음
다만 조명이나 그림자는 없고, 디버그 접근 권한이 있는 앱으로 제한됨
Amazon Fire Phone도 전면 눈 추적 카메라 여러 개와 자이로+가속도계를 써서 휴대폰 UI를 이동시키고 시차가 있는 3D 뷰를 실시간으로 흉내 내려 했던 것 같음. 예전 모바일 Safari 탭 보기에서도 기기 방향에 따라 탭이 움직였음
언젠가 전역 조명 UI를 보고 싶음. 실용적이지 않더라도 Microsoft Design 팀이 내놓던 Windows 렌더링을 실시간으로 보는 느낌이면 좋겠음. 전력 낭비가 크겠지만, 경로 추적된 부드러운 그림자는 멋질 것 같음 - 거의 VisionOS의 동기, 즉 3D 공간 지향 운영체제에 가까워지고 있음
- 이와 가장 비슷하게 본 건 Xcode의 UI 디버그 뷰어임. 모든 UI 요소를 분해도처럼 3D 공간에서 회전해 볼 수 있음
-
요즘 스크린샷이 충분히 흐릿하지 않다고 자주 생각했는데 딱 좋네
- 피사계 심도를 제한하는 건 사진에서 특정 요소를 강조하는 데 매우 유용하고, 그래서 인물 사진에는 거의 항상 쓰임
또한 인물 사진은 망원 렌즈로 어느 정도 떨어져 찍는 게 좋은데, 실제로 보는 얼굴이 아니라 사람들이 기억하는 얼굴을 담아주기 때문임. 보정이 필요한 이유는 같은 렌즈 구성에서 가까이 찍으면 피사계 심도가 훨씬 얕아지고, 멀리서 찍으면 훨씬 깊어지기 때문임 - 이건 불필요하게 비꼬는 말임. 버그 리포트 첨부용으로 이런 피사계 심도 스크린샷을 쓰는 건 싫을 듯함
하지만 마케팅 사이트에서 스크린샷의 특정 부분을 강조해 전달하려는 내용을 드러내는 시각 효과로는 좋아 보임 - 맞음, 먼저 스크린샷을 흐리게 만든 다음 HiDPI 디스플레이로 다시 선명하게 만들자 /s
- 피사계 심도를 제한하는 건 사진에서 특정 요소를 강조하는 데 매우 유용하고, 그래서 인물 사진에는 거의 항상 쓰임
-
이전 Show HN이었던 Screenstab [0]처럼 보임
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849- 스크린샷과 캡션 묶음에서 피사계 심도와 느린 회전이 들어간 영상 몽타주를 만들어주는 비슷한 도구가 있을까?
-
다른 댓글에서 보이는 질문에 답하자면, 이건 three.js로 만들어졌음
2D 평면에 이미지를 렌더링한 3D 장면이고, 카메라가 그중 일부에 특정 가우시안 흐림을 적용한다고 보면 됨. 확대/축소와 이미지 회전에는 orbit controls를 쓰고 있음 -
이건 스크린샷에서 “나머지를 전부 흐리게 처리한다”는 말을 멋지게 표현한 것뿐인가? 개인적으로는 불필요한 내용은 잘라내는 편을 선호함
- 복잡한 UI에서 어디로 이동해야 하는지 보여줄 때는 스크린샷이 나머지 UI도 남겨두는 게 유용할 수 있음
잘라내면 탐색 단서가 사라지지만, 전부 또렷하게 두면 실제 UI만큼 보기 어려워질 수 있으니 흐림 처리가 절충점이 될 수 있음
- 복잡한 UI에서 어디로 이동해야 하는지 보여줄 때는 스크린샷이 나머지 UI도 남겨두는 게 유용할 수 있음
-
흥미로워 보임. 처음에는 스크린샷에서 나와 가장 멀리 있는 부분이 흐려지고, 가장 가까운 부분에 초점이 맞을 줄 알았는데 실제 동작은 그렇지 않았음
중요한 부분을 표시할 수 있다면 스크린샷의 특정 부분에 초점을 맞추는 용도로 쓸 수 있을 듯함- 이미지의 일부를 클릭하면 거기에 초점이 맞음
- 얕은 피사계 심도는 사진이나 가끔 영화에서 보는 사람의 주의를 특정 요소에 모으려는 바로 그 목적으로 쓰임
다만 데모를 보고 나니, 이걸 어디에 쓰고 싶은지는 잘 모르겠음
-
몇 년 전 Blender에서 해본 것처럼, 더 사실적으로 보이게 RGB 픽셀을 추가해도 좋을 듯함
https://blenderartists.org/t/rgb-display-shader/684533 -
YouTube 영상 썸네일 같은 것의 배경에 쓰면 재미있을 듯함
실제 정보를 전달하는 용도로는 쓰이고 싶지 않지만, 어떤 애플리케이션을 쓰는지 알아볼 정도는 전달되는 것 같음 -
제발 이미지 붙여넣기를 지원해줬으면 함
붙여넣기 버퍼를 쓰는 대신 파일 시스템에서 파일을 선택해야 하는 입력 필드는 사용 마찰이 체감상 5배쯤 늘어남. 지금까지 써본 모든 이미지 업로드 버튼에 해당됨