🏁 Product/⌨️ Programming (10) 썸네일형 리스트형 [Figma] 디자인하다 궁금한 점 CPU 점유율 치솟는 현상? 기기정보 : iMac 27" Intel i5 / Mac OS Ventura 13.0.1 1. Figma Web 편집 시 CPU 점유율이 치솟음 피그마 웹페이지 작업 시 페이지를 열었을 경우 CPU 점유율이 급상승하는 현상 작업 화면도 줌인아웃 시 렉이 걸리고 그래픽이 깨지는 현상이 발생한다. 왜 이렇지? 편집 화면을 닫았더니 CPU사용량이 떨어진다. 아래는 평소 사용중인 경우 대충 20%~30% 정도를 오가는 편. 1-2. Figma Mac 클라이언트에서 편집하면 CPU 사용량이 안정적임. 맥용 클라이언트로 실행한 경우에는 안정적인 편 2. 동일 기기에서 Sketch로 디자인 파일 작업을 해보았다. 비교를 위해 Sketch에서 다른 작업파일을 열어보았다. 파일 열기 중에만 4.. [ IT 용어 ] 동기화 vs 비동기화 자바와 자바스크립트에서 동기화와 비동기화의 차이 동기 (Synchronized) 비동기 (Asynchronized) 어느 메소드가 실행하는 동안 다른 메소드 실행이 불가능하도록 블락하는 것을 의미 어느 메소드를 실행하는 도중에도 다시 메소드를 실행하는 것이 가능 Java 1. 수신자데이터 ↔ 송신자 데이터 2. 송신자데이터 ↔ 수신자 데이터 수신자가 어떤 데이터를 보낼 지 예상한 상태여야 가능 1. 수신자 데이터 → 수신자의 반응 2. 송신자의 답변 → 진행 즉, 수신자가 어떤 데이터를 보낼 지 예상 못하는 상태 서버와 클라이언트가 주고받는 것이 동시에 이루어짐 서버와 클라이언트가 주고받는 것이 동시에 이루어지지 않음 시스템의 일치가 필요(쉽지만 비쌈) 시스템의 일치가 필요하지 않음(어렵지만 싸다) 수신.. 프로토타이핑에서의 Lo-fi vs hi-fi Low-fidelity vs high-fidelity Prototyping Fidelity는 설계의 충실도(혹은 정확도)를 의미하며 프로토타입에 포함된 디테일과 기능의 수준을 나타냅니다. Fidelity는 인터랙션, 비주얼, 컨텐츠 및 명령 등 기타 영역에서 다양할 수 있습니다. 우선 프로토타이핑은 아래 4가지정도로 구분이 가능합니다. 러프 스케치 스케치 화면 설계 관점: 와어어프레임(낮은 수준/중간/높은 수준의 화면 설계) 상호 작용 관점: 프로토타이핑(낮은 수준/중간/높은 수준) 더블 다이아몬드 방식으로 보면 첫번째 그림에는, 1. 러프 스케치, 2. 스케치, 3. 상황에 따라 와이어프레임(낮은 수준) > 아직 퍼소나 UX 컨셉, 방향성 도출되지 않은 단계에서는 와이어프레임보다는 스케치의 수준으로 .. [ IT 용어 ] 스냅샷과 백업의 차이 스냅샷과 백업의 차이점 클라우드 서비스 사업자들은 데이터의 가용성과 무결성 유지를 내세웁니다. 그만큼 기업에서의 데이터 보호는 중요하기 때문입니다. 데이터 보호와 관련해 가장 많이 사용되는 '스냅샷'과 '백업'의 차이점에 대해 알아봅니다. 백업 vs 스냅샷 백업 : 원본 데이터를 그대로 복사해 다른 곳에 저장하기때문에 스토리지 상에 동일한 공간이 필요합니다. 스냅샷 : 초기 생성 시 혹은 데이터 변경이 있기 전까지는 스토리지의 공간을 차지하지 않으며, 메타데이터의 복사본에 해당하여 생성시 시간이 오래 걸리지 않고, 장애가 발행해도 빠르게 데이터를 복원할 수 있습니다. 원본 데이터 종속성 스냅샷과 백업의 가장 큰 차이점은 바로 ‘원본 데이터의 종속성’입니다. 스냅샷은 원본의 완벽한 복사본이 아니기 때문에 .. [ IT 용어 ] 스냅샷(Snapshot) 이란? 클라우드에서의 스냅샷 사용 방식 기업에서는 데이터 보호가 중요합니다. 그래서 IT관리자는 장애가 발생한 경우의 복구와 백업 시나리오를 염두해야합니다. 클라우드사용시에도 마찬가지인데요. 예기치 않은 데이터 사고 발생 시 빠른 데이터 복구 대응방안으로 많이 거론되는 클라우드 스냅샷의 정의와 방식은 아래와 같습니다. 스냅샷(Snapshot) 이란? 사진을 찍듯이 특정 시간(시점)에 데이터 저장 장치(스토리지)의 파일 시스템을 포착해 별도의 파일이나 이미지로 저장, 보관하는 기술을 말합니다. 그래서 스냅샷 기능을 이용하여 데이터를 저장하면 유실된 데이터 복원과 일정 시점의 상태로 데이터를 복원할 수 있습니다. 예를 들면, Windows OS의 복원 지점과 같이 장애나 데이터 손상 시 스냅샷을 생성한 시점으로 데.. UI 디자인 가이드 : Text fields ** 이 아티클은 제법 오래된 자료이긴 하지만, UI에서 가장 기본적으로 다뤄야 하는 텍스트 필드에 대한 설명이 디테일하게 설명되어있기에 공유합니다. Cheat sheet : Text fields 텍스트 필드는 사용자 입력의 방법 중 가장 많이 사용되는 한 가지 방법입니다. 로그인 페이지에서나 온라인으로 주문서를 입력하거나 그 외 다양한 정보를 보낼 때에 텍스트 필드를 주로 사용하게 됩니다. 이후 글에서 미리 결정된 텍스트 필(드롭다운과 같은)과 양식의 스타일링 방법을 살펴보겠지만 지금은 전통적이면서 간결한 텍스트 필드 및 스타일링 방법을 살펴보겠습니다. 이 페이지에 있는 내용은 다음과 같습니다. 텍스트 필드 해부 텍스트 필드 구조 일반적인 텍스트 필드 스타일 아이콘 텍스트 필드 상태 값 텍스트 필드 레.. Data Table 설계 가이드 [UI/UX] 효과적인 데이터 테이블 설계에 관한 가이드 데이터 테이블들은 크기, 복잡성, 내용 및 목적에 따라 다르게 사용됩니다. 사용 케이스와 관계없이 잘 설계된 모든 데이터 테이블은 제시된 정보를 명확하게 제공하고 사용자가 통찰력을 얻고 조치를 취할 수 있도록 지원합니다. 이 문서는 각 어플리케이션에서 더 나은 데이터 테이블을 설계하는데에 도움이 되는 모범 사례 모음입니다. 테이블 스타일(Table Style)과 테이블 기능(Table Functionality)의 두 섹션으로 나누어 설명합니다. Table Style 먼저, 테이블을 디자인하고 형식을 결정할 때에는 가독성을 우선시하고 시각적으로 산만할 수 있는 혼란을 주는 요소는 제거하는게 좋습니다. 1. Row Style(최상의 행 스타일) 테이블.. Card UI 디자인 가이드 더 나은 Card UI를 디자인하기 위한 팁과 예시 Card UI는 Instagram, Facebook과 같은 SNS부터 Amazon과 같은 E-commerce 에 이르기까지 지금은보편적으로 사용되는 UI요소입니다. 처음 등장한 이후 Card Layout은 빠르게 확산되었습니다. 정보를 담은 컨테이너로서 Card는 Text, Rich media, Button 등과 같은 모든 요소를 포함하고 있습니다.이들 콘텐츠를 기반으로 다양한 디바이스 및 스크린의 크기에 맞게 조정이 가능하여 UI와 UX의 균형을 맞출 수 있습니다. Card UI란? Card UI는 Single Case에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소를 말합니다. Card에는 다양한 요소가 포함될 수 있겠지만 그것들이 담은 내용은 모두.. UI 디자인 가이드 : 입력 & 폼 좋은 입력 양식 설계를 위한 UI 디자인 지침서 효과적인 입력 폼을 설계할 수 있다는 것은 모든 UI 디자이너에게 있어 중요한 기술입니다. 모든 양식은 사용자의 회원 가입, 제품 구매, 피드백(리뷰) 제공, 이벤트 일정 수립, 세금 작성 또는 의료 기록 제공을 포함한 광범위한 목표를 달성하도록 돕습니다. 목표와 상관없이 모든 양식은 사용자가 빠르고 쉬우며 혼동 없이 완료할 수 있도록 신중하게 설계되어야 합니다. 잘 설계된 형태의 핵심은 입력입니다. 입력은 모든 라이브러리에서 가장 중요한 구성요소 중 하나이며 빠르고 정확한 양식 완성률을 보장하도록 주의하여 설계 및 유지 관리되어야 합니다. 본 가이드에서는 머터리얼 디자인(Material Design), 부트스트랩(Bootstrap) 및 Figma에 기반한.. 완벽한 차트 디자인이 포함된 보고서를 위한 팁 아마도 데이터가 담긴 보고서 혹은 제안서의 기본이라면, 문서의 핵심 내용을 한 눈에 파악할 수 있도록 효율적으로 구성하는 것이겠죠. 그래서 해당 문서에 담긴 데이터를 구조화하고 시각화하는 것이 중요합니다. 데이터 시각화의 가장 기본인 차트 구성에 대해 기본적인 원칙을 다룬 Article을 소개합니다. * 원본 자료의 글을 번역 및 가공한 글입니다. https://uxplanet.org/data-heavy-applications-how-to-design-perfect-charts-c0c893fef6de Data-heavy applications: How to design perfect charts Visualisations are a crucial part of any dashboard design and.. 이전 1 다음
