전체 글

[Figma] Multi-Edit 멀티 에딧 업데이트 - 여러 프레임의 오브젝트를 한 번에 수정하기

새로운 Multi-edit의 등장 며칠 전 포트폴리오를 수정하며 피그마에도 포토샵의 Magic wand tool 같은 게 있으면 좋겠다...라는 생각을 했는데 (조금 결은 다르지만) 마음의 소리를 들었는지 바로 Multi-edit 기능이 업데이트되었다! 피그마 블로그에서 어떤 고민들을 가지고 Multi-edit을 만들었는지에 대한 글이 있는데, 꽤나 재미있다. 2019년부터 Multi-edit에 대해 고민했다고 한다. Behind the Feature: The Multiple Lives of Multi-Edit | Figma Blog Every now and again, we ship a feature that makes us wonder how we ever got along without it. Th..

[WWDC23] Vision Pro 디자인의 원리 (2) Human-centered | Principles of spatial design

[WWDC23] Vision Pro 디자인의 원리 (1) Familiar | Principles of spatial design WWDC23에서 Apple의 최초의 공간 컴퓨터, Vision Pro가 공개되었다. Vision Pro는 공간 운영체제인 VisionOS를 통해 디지털 콘텐츠가 마치 실제 공간에 물리적으로 존재하는 것과 같은 느낌을 사용자에게 제 under-wave.tistory.com 위의 내용과 이어지는 공간 디자인 두번째 원리이다. 인간 중심 Human-centered 두 번째 원리는 인간 중심의 디자인이다. 좋은 디자인은 항상 인간 중심이지만, 공간 디자인에서 완전히 새로운 의미를 갖는다. 사람들은 장치를 착용하고, 눈과 손을 사용하여 상호작용하며, 자신의 시야에서 앱을 경험한다. 공간..

[WWDC23] Vision Pro 디자인의 원리 (1) Familiar | Principles of spatial design

WWDC23에서 Apple의 최초의 공간 컴퓨터, Vision Pro가 공개되었다. Vision Pro는 공간 운영체제인 VisionOS를 통해 디지털 콘텐츠가 마치 실제 공간에 물리적으로 존재하는 것과 같은 느낌을 사용자에게 제공한다. Vision Pro 그리고 VisionOS까지 공개가 되며, Apple Developer 사이트에서는 VisionOS 내에서 앱 개발에 대한 정보들을 제공해 준다. 그중 VisionOS와 같은 공간 운영체제에서 공간 디자인이 어떠한 원리로 이루어져 있고, 어떠한 것들을 고려하여 디자인해야 할지 Principles of spatial design이라는 WWDC23 영상을 보며 알아보았다. Principles of spatial design - WWDC23 - Videos ..

[SwiftUI] DarkMode, Divider, sheet, fullScreenCover, alert, TabView

1. DarkMode Assets - Color Set에서 LightMode와 DarkMode에서의 색상을 설정할 수 있음 2. Divider VStack{ Divider() HStack{ Image(systemName: "heart") Divider() .frame(height: 30) Text("Pado") Divider() .frame(height: 30) } Divider() .background(.red) .frame(height: 30) HStack{ Image(systemName: "heart") Divider() .frame(height: 30) Text("Pado") Divider() .frame(height: 30) } Divider() } Divider() : 구분선을 추가한다. .f..

[SwiftUI] @State, padding, frame

1. @State struct ContentView: View { @State var name: String = "" var body: some View { VStack { Text("Hi \(name)") Button{ name = "Pado" }label: { Text("Click") } } } } @State 변수가 바뀌면 화면을 다시 그린다. 2. padding VStack { Image(systemName: "heart") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 100) .padding([.bottom, .top], 100) .background(.yellow) .foregroundColor(.red) Image(systemNam..