eddward park

정교한 사진작가 MIKKEL JUL HVILSHOJ - 덴마크의 크리에이티브 사진가

2023-11-06T07:16:56Z

필자가 인터뷰를 진행하며 만났던 세계 여러나라의 사진작가를 소개하고 있습니다. 오늘 소개드릴 MIKKEL JUL HVILSHOJ은 덴마크에서 활동하는 사진작가입니다. Mikkel Jul Hvilshøj는 덴마크 출신의 사진작가로, 음식, 제품, 인테리어 등을 중점적으로 촬영합니다. 그는 실물크기 1:1 비율의 사진 촬영 기술을 이용해, 놀라울 정도로

피그마 디자인코드와 개발환경 - 리액트, 뷰, 스벨트, 플러터, 스위프트, 코틀린...

2023-07-27T13:38:26Z

피그마에서 디자인을 실제 개발에 적용하기 위한 코드를 Inspect창을 통해 볼 수 있다. Inspect / Code 에서 CSS, iOS, Android 탭을 선택하면 각각에 해당하는 코드로 보여준다. 이 코드들은 웹, 아이폰, 안드로이드폰의 세가지 환경에 적용되는 디자인 코드들이다. 디자인 코드를 제어할수 있는 환경에 대해 살펴보면 웹은 자바스크립

피그마 디자인을 코드로 만드는 방법 - 개발환경 설정없이 시작하는 코딩

2023-12-04T12:22:52Z

피그마로 디자인을 완성하면 inspect창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다. 완성된 디자인을 개발에 적용하는 과정은 각 컴포넌트들의 class name을 정하고 피그마 inspect창의 코드를 복사하여 붙여 넣는다. 이렇게 붙여넣기만 하면 짠~ 하고 디자인과 똑같이 브라우저에 나타날것이라 예상되지만 실제로는 어느정도 코드의 수

개발 구조를 만드는 피그마 플러그인 - 피그마 플러그인 #util+

2023-06-26T09:13:36Z

필자는 지난 포스팅에서 피그마로 개발 구조를 잡는 방법에 대해 포스팅을 했다. 이 글을 통해 개발구조를 잡아가는 흐름과 개발에 적용한 결과를 이미지를 통해 설명했다. https://brunch.co.kr/@eddwardpark/53 이 과정에서 피그마 플러그인을 사용하여 구조를 잡았다. 여기서 사용한 플러그인(util+)을 어떻게 활용했는지 살펴보자

인간의 눈으로 보는 컬러 디자인 시스템 - 컬러에 대한 이해

2023-06-04T22:42:21Z

각각의 색상을 색상휠로 구분하여 사용하는 방법중 HSL, HSB, HSV등이 있다. 색상을 표현하는 방법중 HSL( hue, saturation, lightness )을 기준으로 보면 색을 결정하는 요소는 hue인것을 알수 있다. hue의 컬러휠 빨간색 0도 기준으로 360도까지 노란색, 녹색, 파란색, 자주색등으로 배치되어 있다. 왼쪽의 컬러휠은 1

피그마로 개발 구조 잡기 - 디자인을 개발에 맞게 구조화 하기

2023-12-02T08:51:04Z

위의 이미지는 최근 필자가 참여한 프로젝트의 일부분을 각색하여 피그마로 재구성한 디자인이다. 실제 개발까지 진행된 프로젝트의 예제라고 보면 된다. 기획을 바탕으로 디자인을 완성하면 위의 이미지와 같이 2차원적으로 보여지게 된다. 2차원적인 컴포넌트들로는 개발자가 html의 구조를 잡기에는 매우 어렵다. 구조를 완성하고 javascript(react,

디자이너가 개발과 친해지는 방법 - 어디서부터 시작해야 하나?

2023-11-08T07:16:28Z

디자이너가 개발을 배우는게 어려운 이유는 무엇일까? html은 tag(div, button, input, h1, p)라는 재료를 이용해 디자인에 맞게 구조를 만드는 역할을 한다. css는 html로 만든 뼈대위에 살을 붙여 디자인이 완성된 웹페이지를 만든다. js는 이렇게 만들어진 웹페이지의 구성요소들의 움직임 또는 필요한 기능을 수행한다. 개발을

Figma AutoLayout vs CSS Flex - 개발자가 보는 피그마 오토레이아웃

2023-08-21T03:41:18Z

피그마로 다자인 요소들의 레이아웃(디자인 요소의 배치)을 반영할때 오토레이아웃을 사용하게 된다. 오토레이아웃을 Inspect창에서 개발자가 코드로 확인을 해보면 CSS의 Flex값들로 보인다. 오토레이아웃은 디자이너가 사용하는 객체이고 개발자가 이를 코드로 변환하기 위해서는 CSS Flex로 작성해야 한다. 필자는 피그마의 오토 레이아웃에에서 레이

피그마의 디자인은 사용자에게 어떻게 전달될까? - 프로덕트의 모든 과정을 살펴보자

2023-08-24T09:24:27Z

우리가 피그마로 디자인한 결과물이 사용자에게 전달되기까지 어떠한 과정이 존재할까? 이러한 과정을 체득하여 이해하기까지 필자또한 굉장히 오랜 시간이 걸린것 같다. 디자인 이후에 거쳐야 하는 각각의 과정들이 실제 개발자들이 알아야할 내용들이기도 하다. 각각의 과정들을 깊이 파보면 그또한 깊이가 상당하다는걸 알게된다. 그렇기에 실제 사용자에게 서비스하기까

피그마, 디자인 토큰 그리고 개발 - 글로만 이해해 보는 디자인 토큰

2023-09-10T15:46:50Z

디자인 시스템 Material은 팀이 Android, iOS, Flutter 및 웹을위한 고품질 디지털 경험을 구축 할 수 있도록 Google에서 만든 디자인 시스템입니다. https://material.io/design/introduction 디자인 시스템은 재사용 가능한 UI 컨포넌트이다. 머터리얼 디자인 시스템을 들여다 보면 엄청나게 방대한 분량

Docker Life Cycle - 이미지로 이해하는 IT

2023-05-27T01:53:21Z

Linux - 이미지로 이해하는 IT

2023-05-27T01:53:47Z

Prototype Pattern - 생성 패턴중 프로토타입 패턴에 대해서

2023-05-13T12:25:16Z

프로토타입 패턴(prototype pattern)은 소프트웨어 디자인 패턴 용어로, 생성할 객체들의 타입이 프로토타입인 인스턴스로부터 결정되도록 하며, 인스턴스는 새 객체를 만들기 위해 자신을 복제(clone)하게 된다. 위키에 정의된 프로토타입 패턴이다. 우리가 사는 지구는 다양한 생명체들이 살고 있다. 세포는 생명체를 이루는 가장 기본 단위이다.

Observer Pattern - 행위 패턴중 옵저버 패턴에 대해서

2023-05-13T12:25:01Z

옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 위키에 정의된 옵저버 패턴이다. 여러분들은 아마도 피그마, 넷플릭스, 멜론등 수많은 구독 서비스 중 하나 이상을 사용하고

Proxy Pattern - 구조패턴중 프록시 패턴에 대해서

2023-05-13T12:24:40Z

일반적으로 프록시는 다른 무언가와 이어지는 인터페이스의 역할을 하는 클래스이다. 프록시는 어떠한 것(이를테면 네트워크 연결, 메모리 안의 커다란 객체, 파일, 또 복제할 수 없거나 수요가 많은 리소스)과도 인터페이스의 역할을 수행할 수 있다. 위키에 정의된 프록시 패턴이다. 회사를 주제로 하는 드라마에서 대리라는 직함을 들어본적이 있을거다. 간단한 업

객체지향 패턴 Cheat Sheet - 이미지로 이해하는 IT

2023-07-28T08:03:49Z

Singleton Pattern - 생성 패턴중 싱글톤 패턴에 대해서

2023-05-13T12:24:23Z

소프트웨어 디자인 패턴에서 싱글턴 패턴(Singleton pattern)을 따르는 클래스는, 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴한다. 위키에 정의된 싱글턴 패턴이다. 우리의 역사와 비교해 보면 한반도가 하나의 이름으로 불리운 고려, 조선 시대에는 한반도 영

State Pattern - 행위 패턴중 상태 패턴에 대해서

2023-05-13T12:24:05Z

상태 패턴(state pattern)은 객체 지향 방식으로 상태 기계를 구현하는 행위 소프트웨어 디자인 패턴이다. 위키에 정의된 상태패턴이다. 여러분과 같이 필자도 무슨 말인지 알듯 말듯 하다. 개발관련 용어들의 정의를 글이나 말로 들어보면 전혀 이해되지 않는 경우가 많다. 이런것이 개발을 이해하기 어렵게 만드는 이유중 하나라고 생각한다. 상태

Decorator Patten - 구조패턴중 데코레이터 패턴에 대해서

2023-05-13T12:23:41Z

데코레이터 패턴(Decorator pattern)이란 주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 유연한 대안이 될 수 있다. 위키에 정의된 데코레이터 패턴이다. 정의된 내용중 '덧붙이는'의 단어가 데코레이터 패턴의 핵심이다. 우리가 일상생활에서 자주 마시게 되는 커피를 통해

Builder Pattern - 생성패턴중 빌터패턴에 대해서

2023-05-13T12:23:24Z

https://brunch.co.kr/@eddwardpark/38 빌더 패턴(Builder pattern)이란 복합 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있게 하는 패턴이다. 위키에 정의된 빌더패턴이다. 여러분이 개발자가 아닌 이상 외계어로 들릴것이다. 필자또한 20개가 넘는 객체지향 패턴중