최유나

UI 기본 용어 - 기본 개념 5가지 - UI 기본 요소, 버튼, 메뉴, 내비게이션, 탭바

2025-02-18T06:51:13Z

예전에 10년 차 이상인 기획자가 기획서를 작성해서 리뷰를 할 때, 스플래쉬 화면을 인트로 화면이라고 지칭한 적이 있습니다. 이때 리뷰를 듣던 디자이너와 개발자 모두 인트로 화면이 스플래쉬 화면과 다른 것인지, 스플래쉬 화면을 뜻하는 것인지 등 질문이 쏟아졌어요. 당시 스플래쉬 용어를 몰랐던 기획자는 인트로 화면이 무엇인지 막 설명하기 시작했습니다. 설명을

웹앱 화면의 기본 구조 - 화면 영역을 구분하는 기본적인 개념

2025-01-29T05:07:14Z

웹과 앱을 디자인할 때 개발자와 소통하기 위해 화면의 구조를 알아야 합니다. 이를 모르는 상태로 작업해 두면 개발자는 의도한 레이아웃을 이해하기 어려워하고, 개발자가 디자이너와 논의하여 레이아웃을 재구성하는 데 많은 시간을 사용하게 됩니다. 개발자 입장에서 디자이너에게 수정 요청을 지속적으로 할 수밖에 없는 상황이 발생하게 됩니다. 디자이너뿐만 아니라 기

포트폴리오 제작기를 마무리하며 - 포트폴리오로 머리 아픈 분들에게

2025-06-22T10:06:33Z

최근 이직 기념으로 작성한, 포트폴리오 제작기. 해당 글을 연재(?)하면서 나처럼 포트폴리오 시작이 막막한 분들이 많음을 알게 되었다. 처음에는 나 혼자만 그런 게 아니었다는 위로를 받았고, 나중에는 포트폴리오를 잘 만들고 싶어 하는 우리에 대해 생각하게 되었다. '왜 잘 만들고 싶을까'라는 고민 끝에 내린 답은 우리의 삶을 더 잘 살고 싶어서, 더 나

합격한 포트폴리오 제작기(3탄) + 실제 예시 공유 - 마지막, 잘 읽히는 구성 만들기

2025-04-18T16:50:22Z

포트폴리오의 핵심 : 구성에 대한 고민 (이전 편 내용대로) 나의 경험과 역량에 대한 정리가 끝난 후에는 포트폴리오 스케치를 시작했다. 지금까지 정리한 나의 경험들을 어떻게 해야 이야기 형식으로 풀어낼 수 있을지에 대해 고민이 많았다. 한 달마다 지나간 시간들, 참여한 일들에 대해 꾸준히 회고했더라면 더 쉽게 적었을 텐데. 과거의 나를 반성하며 어쩔 수

합격한 포트폴리오 제작기(2탄) - 내용 구성이 완성된 분들에게

2025-03-21T09:22:47Z

포트폴리오의 시작: 마인드맵 많은 사람들이 자신의 경험을 글로 정리하는 것을 먼저 하라고 추천한다. 하지만, 글쓰기란 원래 어려운 일이다. 업무 메일을 쓰는 것도 고려해야 할 것이 많은데, 상대방에게 나의 경험을 쉽게 전달하는 글을 쓰는 일은 당연히 어려울 수밖에. 그래서 나는 무작정 글을 쓰기보단, 마인드맵으로 시작했다. 떠오르는 것들을 마구 적은 후에

합격한 포트폴리오 제작기(1탄) - 시작이 어려운 분들에게

2025-03-21T09:23:27Z

출근이행복한 요즘 원하던 회사로 출근하는 시간은 피곤함보다 즐거움이 크다. 강남의 작은 사무실로 출근하다가, 판교의 기획자로 일한다는 사실은 스스로를 더욱 부지런하게 만든다. 특히 친구들의 안부 연락에 회사 이름을 말하는 순간, 모두에게 축하받는 기분은 나만 알기 아까운 감정이란 생각이 들었다. 어디선가 나처럼 원하는 회사로 이직하기 위해 고군분투하고

합격만 바라며 만들었던 포트폴리오

2025-01-19T09:29:41Z

새로운 시작을기념하며 다음 주부터 새로운 곳으로 출근하게 되었다. 드디어 원하는 기업에 취업하면서 포트폴리오에 손도 못 대던 시절을 돌아보게 되었다. 당시만 해도 포트폴리오 만들 줄 몰라서 취업에 허덕였는데, 이제는 프로젝트가 끝날 때마다 어엿하게 포트폴리오를 업데이트하게 되었다. 이렇게 성장할 수 있었던 과거의 경험들이, 나와 같은 사람들에게 도움이 되

Grid System(그리드 시스템)-8pt와 4pt - 8pt 그리드 시스템과 4pt 시스템 기본 개념

2025-04-14T15:06:22Z

개발과 호환되는 디자인은 일관성이 있어야 합니다. 디자인을 작업할 때 일관된 레이아웃으로 디자인을 설계해야 반응형 디자인을 작업할 수 있기 때문이죠. 레이아웃뿐만 아니라 아이콘, 버튼, 여백, 레디오스(radius), 폰트 크기 등 모든 디자인 요소가 규칙적인 수치로 설계되어야 효율적인 디자인과 개발이 가능합니다. 제품(서비스)의 사용자가 어떤 화면에서

Grid System(그리드 시스템)과 반응형,적응형 - 기본 개념과 레이아웃

2024-11-11T23:29:31Z

UXUI 디자인에서 여백은 어떤 기준으로 작업될까요? 공부를 처음 시작하시는 분이라면 8pt 그리드, 4pt 그리드, 소수점 없애기 등에 대해 들어보셨을 거예요. 꼭 UXUI 분야가 아니더라도, 디자인할 때 여백과 간격의 중요성은 잘 알려져 있습니다. 디자인에 정답이 없듯이, 여백과 간격에도 정답은 없습니다. 그럼에도 8pt, 4pt 그리드 시스템과 소

디자인이 디바이스에 표현되는 방식 - 물리적 해상도, 논리적 해상도 등

2024-07-10T12:20:49Z

디자인 작업물 하나로 어떻게 다양한 크기의 화면에 모두 적용이 될까요? 피그마(Fimga)나 스케치(Sketch) 같은 UXUI 프로그램에서 작업한 크기 단위가 특정 디바이스에 표현될 때, 그 디바이스의 해상도에 맞춰 크기가 조절됩니다. 디자이너라면 이 과정을 알아두면 좋습니다. 작업한 디자인이 실제 결과물과 다르게 표현되었을 때 원인을 이해할 수 있으

픽셀 밀도와 DP, SP 개념 - 쉽게 설명하는 디스플레이 단위(2편)

2024-07-06T15:36:31Z

애플의 픽셀 밀도 단위인 PT(Point)가 있다면, 안드로이드에는 DP(Device-independent pixels)와 SP(Scale-independent pixels)라는 픽셀 밀도 단위가 있다. iOS 플랫폼에서 여러 디바이스의 UI를 일관된 크기와 해상도로 표현하기 위해 pt단위를 도입했다. 그 이후 구글에서는 aOS 운영체제로 구현된 디바이스의

픽셀 밀도와 PT 개념 - 쉽게 설명하는 디스플레이 단위(1편)

2024-05-13T04:32:25Z

이전 편에서 픽셀에 대한 개념과 함께 해상도 단위인 픽셀 밀도를 언급했었다. 이번 편에서는 픽셀 밀도를 쉽게 설명해보려 한다. 프로덕트 디자이너(Product Designer)라면, 해상도 단위가 iOS와 aOS에서 어떻게 사용되는지 알아야 다음과 같은 문제들을 해결할 수 있다. 레이아웃 및 디자인 호환성 - 다양한 디바이스 크기와 해상도에 호환되는 레이

이미지 크기와 해상도 차이 - 쉽게 설명하는 픽셀(Pixel) 개념

2024-04-25T12:36:01Z

픽셀(Pixel)의 정의 디지털 화면을 구성하는 가장 작은 단위(최소 단위) 디스플레이 디바이스(예. 모니터, 스마트폰, 태블릿 등)는 작은 점들로 이루어진 격자 형태의 픽셀로 이미지나 텍스트를 표시한다. 각 픽셀은 색상과 밝기에 대한 정보를 가지고 있다. 포토샵(Photoshop), 일러스트(Illustration), 피그마(Figma) 등 작업 화면을

프로덕트 디자이너란? - 프로덕트 디자이너 = 노동 착취를 위한 직무(?)

2024-04-25T12:36:17Z

프로덕트 디자이너 = 노동 착취를 위한 직무? 서비스 기획자로 취업하기 전, 일상 속 디지털트랜스포메이션을 만드는 기획자가 되고 싶어 직군에 대해 찾아본 적이 있다. 서비스 기획자로 취업한 이후에도 커리어 패스(career path)를 위해 관련된 직군 혹은 직무를 공부해왔다. 3년 전(2021년)까지만 해도, 프로덕트 디자이너라는 개념은 대