essay

웹사이트 레이아웃 기획 단계의 와이어프레임 스케치와 웹 디자인 작업 과정 비교

웹 디자인 프로세스 비교: 콘티(기획) -> HTML(구조) -> CSS(디자인)

2017년 추운 겨울이었던 걸로 기억합니다. 꽤 규모가 큰 포트폴리오 사이트 제작 의뢰를 받았었죠. 의욕만 앞선 저는 기획서도 제대로 안 보고 바로 VS Code를 켜서 <div> 태그부터 적어 내려갔습니다. 버튼 하나를 예쁘게 만드는 데 4시간을 썼는데, 정작 그 버튼이 들어갈 전체 메뉴 위치가 결정되지 않았다는 걸 깨달았을 때의 그 허망함이란… 결국 그날 밤을 꼬박 새워 작업했던 […]

웹 디자인 프로세스 비교: 콘티(기획) -> HTML(구조) -> CSS(디자인) 더 읽기"

정교하게 정렬된 디자인 소프트웨어 화면(왼쪽)과 복잡하고 유동적인 웹 코드 화면(오른쪽)을 대비시켜, 디자이너가 코딩을 배울 때 느끼는 구조적 차이와 좌절감을 표현한 이미지

“1px도 틀리면 안 돼!” 디자이너의 코딩 학습을 망치는 3가지 착각

2018년 봄, 프로젝트 마감이 임박했을 때였습니다. 옆자리 디자이너분이 모니터에 자(Ruler)를 대고 있는 걸 목격했습니다. “아니, 지금 뭐 하시는 거예요?”라고 물으니, 시안에서는 여백이 20px인데 브라우저에서는 21px로 보인다며 한숨을 쉬시더군요. 그때 깨달았습니다. 디자이너에게 웹은 ‘고정된 캔버스’지만, 개발자에게 웹은 ‘살아 움직이는 생물’이라는 것을요. 이 근본적인 시각 차이를 인정하지 않으면 코딩 공부는 고통 그 자체가 됩니다. 오늘은 그 고통을

“1px도 틀리면 안 돼!” 디자이너의 코딩 학습을 망치는 3가지 착각 더 읽기"

영상 프레임(시간)과 웹 디브(공간)의 구조적 차이를 표현한 디지털 회로 추상 이미지

“시간의 축 vs 공간의 축” 프레임과 디브로 이해하는 디지털 구조의 차이

2010년 늦가을, 제가 처음으로 영상 편집에서 웹 퍼블리싱으로 전업을 시도했을 때가 생각납니다. 프리미어 프로 타임라인에서는 제가 원하는 0.1초의 순간에 자막을 툭 던져 놓으면 그만이었습니다. 그런데 HTML/CSS의 세계로 넘어오니 상황이 완전히 다르더군요. “아니, 박스 하나 오른쪽으로 옮기는 게 이렇게 힘들 일이야?” 밤새 float: left와 씨름하며 커피를 세 잔이나 비웠던 기억이 납니다. 영상은 ‘시간’을 통제하는 예술이고, 웹은

“시간의 축 vs 공간의 축” 프레임과 디브로 이해하는 디지털 구조의 차이 더 읽기"