2008년 “건축 영상 프레젠테이션” 집필 후 13년 만에 책을 통해서 여러분들과 다시 만나 뵙게 되어 참으로 감사하게 생각합니다. 2004년도 NJSTUDIO 스타트업을 시작하면서 디자인, 컴퓨테이션, 비주얼라이제이션 영역에서 18여 년 동안 그 산업의 변화와 함께 했고, 관련 지식과 경험을 선, 후배 동료들에게 나눌 수 있다는 것이 여간 기쁘고 감사한 일이 아닐 수 없습니다.

때때로 아웃사이더로, 비주류로 여겨지던 저의 전공영역들이 많은 학생과 실무자 교육자분들 심지어는 고등학생까지, 과거 그 어느 때보다 많은 관심을 보이는 요즘입니다. 국내외 수업, 개인 블로그, 유튜브 채널, 다음 브런치와 미디엄 등의 다양한 채널을 통해서 관심과 학습에 대한 열정이 느껴지며 그 변화를 체감하는 하루하루입니다. 격세지감을 느낍니다.

다른 필드에 비해 정보가 많지 않았던 만큼 스스로 학습 하고, 유학과 연구원 생활 그리고 실무를 통해 호기심을 채우며 물어물어 학습했던 기억이 있습니다. 특별히 2018년 겨울부터 본격적으로 유튜브 엔제이채널NJChannel프로젝트를 통해서 우리말 자료가 많지 않던 한국적 상황에 조금이나마 도움이 될 수 있음에 설레고 보람을 느꼈습니다.

학생, 연구자, 교육자, 실무자 분들이 다양한 피드백을 주고 있습니다. 긍정적인 피드백, 날카로운 첨언과 진심 어린 조언으로 작금의 변화된 미디어와 일상을 십분 활용하는 소통으로 우리의 정보 공유 활동도 꾸준히 할 수 있지 않았나 생각합니다. 또 다른 열매로 디자인과 코딩 그리고 컴퓨테이션을 궁금해하고, 시작하려는 디자이너 분들에게 이렇게 한 권의 책을 드릴 수 있어 감사합니다.

필자도 아직까지 호기심 가득한 학생의 입장에서 모르는 부분들이 많이 있을 것입니다. 또한 여러 관심사와 프로젝트, 연구에 쫓기는 하루하루를 보내며 여러분들과 마찬가지로 매일 자라나고 있는 상황입니다. 그러나 현재까지 소수로 취급받는 디자인 그리고 컴퓨테이션 영역에 한 명의 동료로서, 특별히 한국 산업계와 학계의 발전에 조금이라도 도움이 되기를 조심스럽게 희망하며 저의 경험과 지식 그리고 생각을 나누어 봅니다.

2021 뉴욕에서 이남주 드림

들어가면서 - link

왜 디자이너가 코딩을 배워야 할까요?

초 연결, 초 지능, 인공지능, 머신 러닝, 빅 데이터, 클라우드, 에지 컴퓨팅, 사물인터넷, 5G, 자율주행, 병열 연산, 블록체인 등, 다양한 4차 산업혁명 키워드가 있고, 각 계층의 다양한 산업들은 빠르게 변화하며 새로운 패러다임에 적극적으로 대응을 하고 있죠. 이러한 상황에 디자이너는 어떤 준비와 변화가 요구될까요? 4차 산업의 쌀인 데이터(디자인 데이터)를 활용하기 위해서 디자이너도 코딩이라는 도구를 배워야 해요.

코딩 없이 교양처럼 쉽게 시작할 수 없을까요?

‘읽으면서 이해하는 디자이너를 위한 코딩’ 형태로 컴퓨테이셔널 디자인을 이야기해 보려고 해요. 일반적으로, 코딩Coding하면, 따라 하기 튜토리얼이 주류를 이루고 있죠. 그도 그럴 것이 실습해 보고 그과정에서 이해와 깨달음을 챙겨가는 것이 사실이죠. 하지만 이 책에서는 코딩 없이 읽으면서 입문하는 것을 목적으로 하고 있어요. 이론과 개념을 먼저 이해하고, 종합적인 지도를 만들어 새로운 기술과 기회의 패러다임을 타고 넘을 수 있도록, 코딩을 공부하기 원하는, 코딩에 익숙하지 않은 디자이너를 돕고자 해요.

코딩, 전공이 아닌데도 알아야 할까요?

요즘 많은 디자이너들이 디자인과 코딩, 데이터와 인공지능, 컴퓨테이셔널 디자인 분야에 관심을 보이고 있어요. 전문적인 깊이 까지는 아니더라도, 대화가 가능한 수준의 이해와 컴퓨테이셔널 디자인의가능성에 대해서 궁금해 하시죠. 과거에 전통적인 디자인에서는 프로그래밍Coding & Programming을 컴퓨터 공학의 한 분야로 생각했었죠. 하지만 과거에 수기로 기록을 하던 것들이 도구의 발전으로, 한글, 워드, 엑셀을 사용하는 것처럼 이제는 그 분야가 전공이 아니더라도, 반드시 알고 이해해야 하는 시대, 곧 데이터 기반 사회가 오고 있는 것이죠.

보다 전문적으로 공부해 보고 싶다면?

학생, 연구자, 교육자, 실무자분들이 본격적으로 디자인을 위한 코딩 공부에 앞서 원리와 개념, 그것들의 연결고리를 파악하여 전체적은 구조를 알고 학습을 시작할 경우 효과적이고 선택적인 학습이 가능하죠. 코딩은 다양하게 사용되는 도구이기 때문에 나의 관심사와 목적에 맞게 어떻게 수준을 높여 나갈 것인가에 대한 전략이 필요해요. 필자의 국내외의 현장 경험, 강의, 연구, 실무를 통해서 느낀 피드백들을 정리하여 학습 자료가 충분하지 않은 상황에서, 시작하는 분들에게 적합한 시작 지점과 방향을 잡을 때 유용한 학습 지도가 되기를 희망해요.

CHAPTER 1 재료, 도구, 디자인 Material & Tool & Design - link

1 재료, 도구 그리고 디자인 Material & Tool & Design - link

1.1 도구와 기술의 발달 Tool & Technology - link

1.2 재료와 도구 그리고 디자인 Materials & Tool & Design - link

1.3 데이터 Data as Materials - link

1.4 데이터: 현상의 압축 & 통찰의 향연 - link

! 4차 산업, 디자인, 코딩 - link

! 데이터를 위한 코딩 - link

! 고 수준: 하이 레벨 High-level & 저 수준: 로우 레벨 Low-level - link

2 도구 : 컴퓨터 & 소프트웨어 Tool: Software - link

2.1 속도 Performance - link

2.2 지식과 기술의 합, 소프트웨어 Knowledge + Technology : Software - link

2.3 실제 도구에서 가상 도구 Physical Tool to Digital media - link

2.4 현상에서 시스템 Phenomenon to System - link

2.5 애플리케이션에서 퍼스널라이제이션 Application to Personalization - link

2.6 소프트웨어에서 커스터마이제이션 Software to Customization - link

! 지식의 빈익빈 부익부 - link

! GUI: 볼 수 있는 것은(것만) 조작할 수 있다. - link

CHAPTER 2 디자이너에게 코딩이란 Coding for Designers - link

3 디자이너가 왜 코딩을 해야 할까? - link

3.1 창의성의 도구? Code for Creativity - link

3.2 자동화의 도구? Code for Automation - link

3.3 최적화의 도구? Code for Optimization - link

3.4 데이터 때문에? Code for Data - link

3.5 디자인 방법론 때문에? Code for Design Methodologies - link

! 컴퓨터를 사용하는 것은 창의적이지 못하다? - link

! 쉽고 간단한 소프트웨어의 함정 & 공부 방법 - link

4 디자이너가 코딩을 해야 하는 이유 - link

4.1 일 할 수 있는 일꾼을 만든다 Code for Automation - link

4.2 균일한 품질 유지를 도와준다 Code for Quality Assurance - link

4.3 실험적 작업 Code for Experimentations - link

4.4 문제로서의 디자인 Code for Design Issues - link

4.5 솔루션으로서의 디자인 Code for Design Solution - link

4.6 데이터로의 디자인 Data-Driven Design Process - link

4.7 다양한 커리어 패스를 만들 수 있다 - link

4.8 진입 장벽을 높여준다 - link

4.9 경쟁력을 준다 - link

4.10 컴퓨테이셔널 사고 Computational Thinking - link

! 실력 그리고 경쟁력이란? - link

! 미래를 예측할 때, 펀더멘탈(fundamental)의 이해 / 변할 것과 변하지 않을 것 - link

CHAPTER 3 코딩 & 컴퓨테이셔널 디자인 활용 - link

5 큰 스케일에서 - link

5.1 지리정보 데이터 Geographic Information System - link

5.2 빅 데이터: 제3의 공간 Third Place Analysis - link

5.3 네트워크 분석 Network Analysis - link

5.4 공간정보의 보간 Interpolation - link

5.5 이미지 프로세싱 & 리모트 센싱 Raster Data & Remote Sensing - link

5.6 궁극의 디자인 옵션 The Best One - link

5.7 최적의 디자인들 Optimal Options - link

6 작은 스케일에서 - link

6.1 시각화 도구로의 기하학 Geometry - link

6.2 분석도구로의 기하학 Geometry - link

6.3 재료 Material 와 디자인 - link

6.4 패널의 패턴 - link

6.5 모듈의 배치 - link

6.6 디지털 패브리케이션 & 로봇틱스 Digital Fabrication Robotics - link

! 전공 용어를 쓰는 이유 - link

7 시뮬레이션 영역에서 - link

7.1 건축 구조 & 에너지 시뮬레이션 - link

7.2 이산화: 공간 단위 분할 Dense - link

7.3 이산화: 점 Particle 단위로 분할 Sparse - link

7.4 시뮬레이션 도구로 기하학 Geometry - link

7.5 환경, 조경, 시뮬레이션 - link

8 가상 영역에서 - link

8.1 웹사이트 Web Design & Coding - link

8.2 가상현실 & 증강현실 VR AR - link

8.3 메타버스 Metaverse - link

9 시각화 영역에서 - link

9.1 시각디자인 & 모션 그래픽 - link

9.2 디자인 시각화 Design Visualization - link

9.3 테크니컬 아트 Technical Art - link

9.4 미디어 아트 & 크리에이티브 코딩 Creative Coding - link

9.5 데이터 시각화 Data Visualization - link

9.6 트레이싱 & 매핑 Tracing & Mapping - link

9.7 클러스터링 Geo processing & Clustering - link

10 인공지능 영역에서 - link

10.1 이미지: Image & Raster Data - link

10.2 머신 러닝, 숫자Numeric 데이터, 시각 Perception 데이터 - link

10.3 데이터: 스마트 드로잉 & 커맨더 - link

10.4 복셀과 머신 러닝 Volumetric Representations & Machine Learning - link

! 인공지능에 대한 하나의 단상 - link

11 더 다양한 영역으로 - link

11.1 데이터 기반 사회와 산업의 변화 - link

! 그 많은 것 언제 다하나?1: 기초의 중요성 - link

! 컴퓨테이셔널 디자인의 현재와 미래 - link

CHAPTER 4 코딩 & 디자인 Coding & Design - link

12 디자인 & 코딩 & 프로그래밍 - link

12.1 코딩을 통한 디자인 - link

12.2 코딩이란 Coding - link

12.3 프로그래밍이란 Programming - link

13 디자인 & 컴퓨테이션 Design & Computation - link

13.1 컴퓨테이셔널 디자인 Computation - link

13.2 형태 Shape - link

13.3 좌표계 Coordinate System - link

13.4 색 Color - link

13.5 디자인 데이터 & 정보 Information - link

13.6 알고리즘 Algorithm - link

13.7 애플리케이션 프로그래밍 인터페이스 API - link

13.8 프로그래밍 Programming - link

! 비트맵 VS 벡터 그래픽스 - link

14 프로그래밍 패러다임 & 디자인을 위한 코딩 - link

14.1 프로그래밍 패러다임 Programming Paradigms - link

14.2 절차지향 & 룰 베이스 디자인 Procedural design & Rule based design - link

14.3 파라메트릭 디자인 Parametric Design - link

14.4 알고리즈믹 & 제너레이티브 디자인 Algorithmic & Generative design - link

14.5 에이전트 베이스 디자인 Agent-based design - link

14.6 그 밖에 적용... - link

! 컴퓨테이셔널 디자인(디자이너)의 보편적 인식과 오해 - link

! 컴퓨테이션Computation으로 만들어진 건축물? - link

CHAPTER 5 컴퓨테이셔널 사고 Computational Thinking - link

15 컴퓨테이셔널 사고 - link

15.1 컴퓨테이셔널 사고 주요 개념 Computational Thinking: Key concepts - link

15.2 암묵에서 명시로 From Implicit to Explicit - link

! 메타인지Metacognition와, 컴퓨테이셔널 사고, 디자인 - link

16 컴퓨테이셔널 디자인 사고 Computational Thinking for Design - link

16.1 분해와 패턴: 디자인 방법들 - link

16.2 명시적 기술: 알고리즘 - link

15.3 명시적 기술: 변수 & 파라미터 Variables & Parameters - link

16.4 알고리즘의 특징이 무엇 일가요? - link

16.5 디자인 & 도구로서의 코딩 - link

! 디자인 전공생의 걱정, 선택, 그리고 미래 - link

17 컴퓨테이셔널 디자인 적용 & 방법론 - link

17.1 가설, 상상, 질문하기 Question & Imagination & Hypothesis - link

17.2 방법론 & 접근법 The Methodology & Approach - link

17.3 정책 The Manifesto & Policy - link

17.4 구현 Implementation - link

17.5 공간 정보 Spatial Data Manipulation - link

17.6 도구 & 원칙 The Tool & The Principle - link

17.7 요약 Summary - link

! 알고리즘 학습 방법 - link

! 왜 컴퓨테이셔널 디자인에 배타적일까? - link

18 수학, 가장 엄밀한 언어 Numerical Description as Design Tools - link

18.1 엄밀함 - link

18.2 수 체계 - link

18.3 수학의 추상화 - link

18.4 상상의 도구 수학 - link

18.5 수학과 공간정보 - link

18.6 코딩 공부에 필요한 능력? 수학력? - link

! 난수Random에 대한 단상 - link

! 언어와 사고의 도약 - link

CHAPTER 6 코딩Coding 무엇을 기술하나? - link

19 코딩, 무엇을 어떻게 기술Description하나? - link

19.1 디자이너에게 필요한 언어 - link

19.2 그래서, 어떤 언어를 써야 해? - link

19.3 계산 그리고 ‘=’ 의 의미와 중요성 - link

19.4 상태와 메모리 State and Memory - link

19.5 비교와 반복 Conditional Statement & Loop - link

19.6 논리 덩어리, 함수Function - link

19.7 흔한 실수 - link

! 파이썬 Python 언어 공부 방법 - link

! 디자이너를 위한 C# 공부 자료 - link

20 코딩: 정보와 행위의 정의 - link

20.1 프로그래밍의 본질 - link

20.2 객체 Object - link

20.3 디자인 객체 Object - link

20.4 벡터 데이터 & 행위 Vector - link

20.5 데이터 구조로서의 지오메트리 Geometry as Data Structure - link

! 속도와 메모리 관리 - link

21 코딩: 공간정보 & 파이프라인 - link

21.1 자료구조: 선형 & 비선형 구조 Data Structure - link

21.2 공간정보 그리고 이산화 Discretization - link

21.3 그래프 데이터 구조: 위상 정보 Topology - link

21.4 픽셀 데이터 구조: 연속 정보 - link

21.5 공간 나누기 Partition - link

21.6 소프트웨어 아키텍처: 데이터 파이프라인 - link

22 버그와 디버그 Bug & Debug - link

22.1 버그의 분류 Types of software bugs and errors - link

22.2 디버깅의 자세 - link

22.3 고무 오리 디버깅 Rubber Duck Debugging - link

22.4 코딩 학습 요약 그리고 나아갈 방향 - link

! 브루트 포스Brute Force & 모테카를로Monte Carlo 방법론 - link

CHAPTER 7 학습 방향 Study Plans - link

23 코딩 학습 방법 - link

23.1 가장 익숙한 도구/ 환경에서부터 시작하자 - link

23.2 추천되지 않는 학습 방법 - link

23.3 디자이너로서, 컴퓨테이셔널 디자인을 어떻게 공부할까? - link

! 그 많은 것 언제 다 하나 2: 학습전략 - link

! 컴퓨테이셔널 디자인 수업 방식: 스튜디오 형식 VS 강의 형식 - link

24 컴퓨테이셔널 디자인 테크트리 - link

24.1 더 높은 수준의 컴퓨테이셔널 디자인 학습 스텝 - link

24.2 컴퓨테이셔널 디자인 스페셜리스트 Computational Design Specialist - link

24.3 디자인 엔지니어링 Design Engineering - link

24.4 소프트웨어 엔지니어링 Software Engineering - link

24.5 소프트웨어 엔지니어링 VS 소프트웨어 디벨롭먼트 - link

! 생각의 점유율과 Deep Thinking - link

! 컴퓨테이셔널 디자인 이론에 대한 단상 - link

25 데이터 - link

25.1 DIKW 피라미드 다이어그램 Data, Information, Knowledge, Wisdom - link

25.2 데이터로의 인식 Qualitative Data & Quantitative Data - link

25.3 데이터의 분류 - link

25.4 데이터로의 기록 & 가공 - link

25.5 전공지식과 경험 Domain Knowledge & Experiences - link

! 창작, 미적 영역도 데이터화가 가능할까? - link

CHAPTER 8 학습 자료 Study Materials & References - link

26 강의와 워크숍을 대하는 자세 - link

26.1 시작하는 단계 - link

26.2 중급 - link

26.3 고급 - link

27 강의 자료 - link

27.1 컴퓨테이셔널 디자인 수업 Computational Design & Creative Coding - link

27.2 질의응답 시리즈 QnA - link

28 워크숍 참조 자료 Workshop Materials - link

28.1 디자이너를 위한 파이썬 워크숍 Python for Design Scripting - link

28.2 디자이너를 위한 C# 디자인 스크립팅 C# for Design Scripting - link

28.3 유니티를 디자인 스크립팅 & 시각화 Unity for Design Script & Viz - link

28.4 웹 환경에서의 디자인 스크립팅 Design Scripting on Web - link

28.5 디자인 데이터 Design Data - link

28.6 디자인을 위한 인공지능, 머신 러닝, 데이터 AI, ML, Data for Design - link

28.7 컴퓨테이셔널 디자인 워크숍 Computational Design Workshop - link

28.8 CAD 디자인 소프트웨어 구축 Stand-alone CAD Software development - link

28.9 디자인 시각화 & 소프트웨어 활용 Design Visualization & CAD Software - link

28.10 디자인 시각화 Design Visualization - link

29 컴퓨테이셔널 디자인 프로젝트 예제 - link

29.1 디자인 & 컴퓨테이션 프로젝트 Design & Computational Project - link

29.2 컴퓨테이셔널 디자인 알고리즘 Computational Design Works, Work Snippet - link

29.3 연구, 기고 글 Research & Publication - link

29.4 하버드, MIT 연구 작업 Studies & Research & Lab - link

30 토크 & 토크 인터뷰 Talk & Interview - link

30.1 디자인 그리고 컴퓨테이션 Design and Computation - link

30.2 빔 그리고 벨류 엔지니어링 Bim & Value Engineering - link

31 참조 프로젝트 링크 - link

31.1 엔제이 프로젝트 시리즈 - link

31.2 KICDT 학회 Korean Institute of Computation, Design and Technology - link

31.3 엔제이의 컴퓨테이셔널 디자인 시리즈 - link

[컴퓨테이셔널 디자인] 읽으면서 입문하는 디자이너를 위함 코딩

www.youtube.com

시간이 되는대로 글을 업데이트하도록 하겠습니다. 생각보다 시간이 많이 걸리네요. 양해 부탁드립니다.

많은 피드백 부탁드립니다!!

감사합니다.

Revision 8 / 2022/02 - 오디오북 링크

Revision 7 / 2022/01 - 2022 출판 버젼

Revision 6 / 2021/12

Revision 5 / 2021/09

Revision 4 / 2021/06

Revision 3 / 2021/04

Revision 2 / 2021/01

Revision 1 / 2020/05

이남주 / NJ Namju Lee / nj.namju@gmail.com

MDes;Harvard, MArch;UCB, B.S;SNUST, Research Fellow; MIT

Architecture design, Computation, Visualization specialist

Director and founder of NJ Design Lab / NJSLab / NJSLabSandbox

Facebook / Instagram / Linkedin

NaverBlog / DaumBrunch / Youtube(kr)

GitHub / CodePen / Medium / Youtube(eng)

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari