본문 바로가기

전체 글66

[UI/UX] (2) Visibility of system status - Visibility of system status The first topic to address is system visibility. The system must always inform the user of progress through timely and appropriate feedback. For example, indicating how much battery is left on a phone or laptop, notifying unread email counts, showing the next stop in public transport, and when the next vehicle is arriving are all ways that allow precise recognition of the current system state. 1.. 2024. 4. 18.
[UI/UX] (1) User Interface Design - 10 Usability Heuristics Heuristics - What is 'Heuristics'? "Typically, 'Heuristics' is used synonymously with 'discovery method'. It describes the process of developing and refining people's thinking by acting according to the situation and intuition at hand, experiencing trials and errors, and thereby moving in a better direction." We do not hand out detailed user manuals to the users of apps, websites, and games that.. 2024. 4. 18.
블록체인 프로젝트 기획 경험기 (1) - Experience planning a blockchain project 이 글은 이번에 블록체인 프로젝트 그중에서 이더리움 네트워크 프로젝트 배포를 마치면서, 기획을 해본 경험을 잊지 않기 위해 정리해 보았다. 정말 완벽하게 모든 방법론에 대해 적어나가진 못하겠지만, 적어도 처음 블록체인 프로젝트를 기획하는 기획자에게 도움이 되었으면 좋겠다. 전체 프로세스 블록체인이라고 해서 기획 및 개발의 전체적인 과정은 기존 웹이나 앱을 만드는 과정과 크게 다르지 않지만, 몇 가지 차이점이 있었다. 🖊️ 전체 프로세스 1) 아이디에이션 및 리서치 → 2) 표준 기술 리서치 → 3) 기획서 정리 → 4) UX/UI 및 스마트 컨트랙트 세부 기획 → 5) 프로토타입 제작 → 6) 개발 ↔ 7) 테스트 → 8) 론칭 아이디에이션 및 리서치 내가 경험했던 블록체인 프로젝트의 방향성은 크게 2가.. 2024. 4. 17.
흔들리지 않는 선명한 디자이너가 되는 법 안녕하세요, 디자이너 여러분! 오늘은 디자이너로 성장하면서 자신의 의견을 표현하고 다른 이의 의견에도 흔들리지 않는 선명한 디자이너가 되기 위해서 지금까지 어떤 마음가짐과 노력을 했는지 되돌아보면서 정리한 내용에 대해 공유해보겠습니다. 1. 자신을 알자 디자이너로서, 우선 자신을 잘 알아야 한다고 생각해요. 내가 어떤 부분에서 뛰어나고, 어디서 부족한지를 깊이 이해하고, 어떤 디자이너로 성장하고 싶은지 명확히 정의해봐야 해요. 2. 논리적 사고와 분석 능력 강화 자신의 의견을 남에게 이해시키기 위해서는 논리적 사고와 분석 능력이 필수적이에요. 우리는 아티스트가 아니라 디자이너이기 때문에 논리적으로 생각하고, 다른 이의 의견을 꼼꼼히 살펴보며 효과적으로 의사소통하는 법을 익혀봐야 돼요. 예쁘고 좋은 디자인.. 2023. 11. 15.
스프라이트 기법 (2) - GIF도 스프라이트로? 앞에서 이야기한 이미지 스프라이트 기법은 GIF 이미지에도 활용할 수 있습니다. GIF 스프라이트를 사용하면 일반 이미지 스프라이트처럼 하나의 큰 이미지만 다운로드하기 때문에 GIF의 큰 용량 대신 적은 용량으로 구현할 수 있어 웹 페이지의 로딩 속도가 빨라지고, 네트워크 대역폭을 절약할 수 있습니다. 그렇다면 GIF 스프라이트는 어떻게 만들수 있을까요? 일반 이미지를 스프라이트 맵으로 만드는 것처럼 GIF 역시 같은 방법으로 만들 수 있지만, 좀 더 쉽게 만들기 위해서는 다양한 툴을 활용할 수도 있습니다. 제가 선택한 가장 쉬운 방법은 포토샵과 웹사이트(https://www.toptal.com/developers/css/sprite-generator)를 활용하는 것입니다. GIF 스프라이트 맵 만들기 .. 2023. 11. 1.
스프라이트 기법 (1) - 이미지 최적화의 기술 스프라이트 기법(Sprite Technique)? 웹 개발에서 스프라이트 기법(Sprite Technique)은 이미지 및 그래픽 파일 관리의 한 형태로, 여러 이미지를 하나의 이미지로 결합하여 웹 페이지의 성능을 최적화하는 기술입니다. 스프라이트 기법의 주요 특징은 다음과 같습니다: 이미지 결합 여러 개의 작은 이미지를 하나의 큰 이미지로 결합합니다. 이를 통해 브라우저는 한 번의 요청으로 모든 이미지를 가져오므로 네트워크 레이턴시(지연 시간)를 줄일 수 있습니다. 스프라이트 맵 결합된 이미지와 해당 이미지의 위치 정보를 가진 스프라이트 맵을 만듭니다. 스프라이트 맵은 CSS에서 이미지 위치와 크기를 지정하는 데 사용됩니다. 이미지 위치 (X, Y 좌표) 스프라이트 이미지 내에서 각 작은 이미지 조각의.. 2023. 10. 30.