God is in the details

C유형의 첫 번째 문제 C-1 해운대 빛축제 와이어프레임 살펴보기 기존에 풀어보았던 A, B이 서로 비슷한 구조를 가지고 있었다면 C유형은 완전히 다르다. 애니메이션 관련 세부사항: 공지사항/갤러는 탭메뉴로 구현 이미지 슬라이드는 사라졌다가 다음 슬라이드가 표시되는 페이드 인&아웃 형태 서브메뉴는 각각 세로형태로 표시되는 형태 레이어 팝업은 기존과 동일 C-1: 해운대 빛축제 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 Aside와 Main으로 영역을 2등분한다: 이후에 세부 영역을 추가로 작성한다: CSS 기존처럼 reset을 진행한 뒤 Aside와 Main 영역을 먼저 정의한다: ..

B유형의 첫 번째 문제 B-1 대한은행 와이어프레임 살펴보기 B유형의 경우 전반적인 레이아웃 구성은 A유형과 거의 동일하지만, 상단의 헤더와 푸터의 Width를 브라우저 100% 처리해 줘야 한다. B-1 유형의 경우 푸터를 제외한 나머지 구조(메뉴, 탭메뉴 등)는 A-1과 동일하고 하단의 푸터 레이아웃은 A-3와 동일하다. 메인메뉴에 마우스를 오버하면 서브메뉴 전체가 한 번에 나타나는 구조 이미지 슬라이드는 가로로 이동하도록 구현해야 한다. B-1: 대한은행 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행하고, 아래와 같은 구로조 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: *A유형과 다른 점이 있다면 B유형은 각각의 id별로 container..

A유형의 마지막 문제를 풀어볼 차례 A-4: 유진건설 와이어프레임 살펴보기 앞서 작업했던 다른 A형 문제에서 한 번씩은 출제되었던 구조가 조합되어 있다: 배경이 서브메뉴와 함께 슬라이드 되는 형태는 A-2와 동일 공지사항과 갤러리가 별도로 구성된 형태 또한 A-2와 동일하다 푸터 영역은 좌측의 로고 영역이 제외되는 대신 A-2에서 출제되었던 패밀리사이트 메뉴가 우측에 배치된다 이미지 슬라이드의 경우 A-3와 동일한 페이드인&아웃 형태의 애니메이션을 구현해야 한다 A-4: 유진건설 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: 이어서 CSS를 작성한다: @charset "@U..

A유형 3번째 문제 풀이. A-3: 강원천문대 와이어프레임 살펴보기 와이어프레임 구조는 앞서 풀었던(A1, A2)와 동일하고, 아래와 같은 효과를 적용해야 한다: A영역의 메뉴 애니메이션: A1과 동일한 애니메이션 효과지만, 각각의 메뉴에 효과가 별도로 적용돼야 한다. B영역 슬라이드 애니메이션: 이미지가 서서히 사라지고 나타나는 Fade-in, Fade-out 효과가 적용되어야 한다. C영역: A1과 동일한 탭메뉴를 적용해야 한다. A-3: 강원천문대 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML를 사용해서 와이어프레임의 기본 구조를 만든다: CSS로 넘어가서 리셋(reset)을 먼저 적용한 뒤에, ID별로 코드를 작..

지난번에 풀어본 A1 문제(풀이 링크)에 이은 두 번째 문제 풀이. A-2: Green복지재단 와이어프레임 살펴보기 기본 와이어프레임 구조는 A1과 동일하고, 아래와 같은 4가지 차이점이 있다: 메인메뉴에 마우스를 오버하면 전체배경이 서브메뉴와 함께 내려온다. B영역의 슬라이드가 세로가 아닌 가로방향으로 전환된다. C영역의 공지사항과 갤러리가 탭메뉴가 아닌 별도 메뉴로 구성되어 있다. D영역 오른쪽 하단에 SNS 아이콘 대신 패밀리사이트 메뉴가 들어간다. A-2: Green복지재단 와이어프레임 구성하기 A1과 마찬가지고 Visual Studio Code를 실행한 뒤, 아래와 같은 폴더 구조로 파일을 생성해 준다: 먼저 아래와 같은 HTML 구조를 작성해서 와이프레임의 기본 구조를 만든다: 이어서 CSS를..

18일 뒤인 11월 25일에 웹디자인기능사 실기시험을 볼 예정이다. 남은 기간 동안 시험 주관처인 한국산업인력공단 홈페이지에서 제공하는 공개문제를 최대한 많이 풀어보기로 했다. 23년도에 출제되는 총 20개 문항이 제공된다: 공개문제 자료실 상세 | Q-netBODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } LI { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } ▶ 적용시기: 2023년 기능사 제1회 부터(1~www.q-net.or.kr *참고: 제이..

디자인 스프린트(Design Sprint)란? 다섯 단계로 구성된 시간제한적인 디자인 프로세스로 보통 5일(하루 8시간) 동안 진행된다. 디자인 스프린트의 목표 아이디어를 디자인하고, 프로토타이핑과 사용자 테스트를 통해 중요한 디자인 문제를 해결하는 것. 언제 디자인 스프린트를 고려해야 할까? 다음 사례 중 한 가지 이상에 해당하는 경우 디자인 스프린트를 진행을 고려해 볼 수 있다: 1. 테스트할 잠재적인 디자인 해결책이 너무 많을 때 2. 문제를 해결하는데 여러 부서의 인원이 협업을 진행하는 경우 3. 해결할 디자인 문제의 범위가 스프린트를 진행할 만큼 넓을 때 디자인 스프린트의 장점 1. 사용자 최우선 고려 디자인 스프린트에 참가하는 모든 구성원들은 항상 디자인 과제가 사용자와 그들의 니즈에 중점을 ..

UX 디자인 프레임워크(Framework)란? 실제 사용자의 문제를 해결하고 해결책을 개발하는 가장 좋은 방법과 프로세스에 대한 지침을 제공하는 개념적 도구. 프레임워크는 디자인 프로세스 구조를 확립하고 협업을 유도하여 혁신적일 결과물을 만들어낼 수 있도록 도움을 준다. 현업에 종사하는 대부분의 UX 디자이너들은 제품을 최종 출시할 때까지 특정한 프레임워크나 프로세스를 따라서 모든 작업을 수행한다. 디자인 씽킹(Design Thinking) 현재 내가 수강하고 있는 Google UX Design Ceritificate 프로그램에서는 디자인 씽킹(Design Thinking) 프레임워크에 맞춰서 과제가 순차적으로 진행된다. 디자인 씽킹은 사용자를 중심으로 문제를 접근하고 해결하는 프레임워크로 아래와 같은 ..

포트폴리오 수업을 들으면서 기억에 남았던 부분 기록. 포트폴리오 표지 디자인 포트폴리오 표지의 중요성은 생각보다 굉장히 크다. 표지의 디자인만 봐도 지원자의 디자인 센스와 실력을 얼추 가늠할 수 있기 때문에(심한 경우 표지만 보고 포트폴리오 심사에서 거르는 경우도 있다고 한다) 강렬한 첫인상을 남기기 위해서라도 디자인에 신경을 쓰는 게 좋다. 보통 포트폴리오 표지를 디자인할 때 다른 디자이너의 포트폴리오를 참고하는 경우가 많은데, 이런 방법은 자신만의 개성을 표현하기에 적합한 방법이 아니다. 그렇다면 포트폴리오 표지 디자인을 위한 영감은 어디에서 얻을 수 있을까? 표지 디자인이 우리가 제품을 고르는데 큰 영향을 미치는 장소를 떠올려보면 그 힌트를 얻을 수 있다. 가장 대표적인 장소는 바로 서점. 많은 독..

디자인 공부를 하면서 이따금씩 막막함이 몰려올 때가 있다. 예전엔 그 막막한 감정에 휩쓸려 버렸다면, 나이를 조금씩 먹어 가면서는 그 감정을 마주하고 내가 막막함을 느끼는 원인과 이유를 파악하려고 노력한다. 최근 부트캠프를 이수하고 포트폴리오 수업을 절반정도 이수한 이 시점에 파도처럼 큰 막막함이 몰려왔고 며칠 동안 생각을 정리했다. 나를 갈아먹는 조급함 사실 지난 5월에 부트캠프를 시작할 때만 해도 10월이 되면 포트폴리오를 완성하고 여러 회사에 지원을 하고 있는 상상을 했다. 근데 현실은? 포토샵과 일러스트를 비롯한 디자인 기본기를 쌓기에도 시간이 부족하고 앱 디자인은 시작도 하지 못했다. 시간이 갈수록 현실과 기대치에 괴리감이 커지면서 디자인 작업에 집중하지 못하는 빈도도 늘어만 갔다. 어느덧 머릿..