brunch

You can make anything
by writing

- C.S.Lewis -

by 이남주 NJ Namju Lee Jan 18. 2020

DATA & DESIGN 컴퓨테이셔널 디자인

Data & Design / Computational Design

https://youtu.be/n7qvjYWHyRs

들어가면서,


안녕하세요, 저자 이남주입니다. 2009년의 건축 영상 프레젠테이션 집필 이후 10여 년 만이네요! 반가워요!


NJSTUDIO 건축 디자인, 시각화, 컴퓨테이션 스타트업을 2004년 겨울에 창업하여, 지금까지 여러 모양으로 활동해 오고 있어요.


어떤 분은, 저를 건축 디자이너로, 혹은 데이터 시각화 전문가, GIS 분석가, 건축도시 3D 시각화 전문가, 컴퓨테이셔널 디자인 전문가, 소프트웨어 개발자, 혹은 교육자, 오래전에는 비보이 댄서 등등 다양한 모습으로 기억하실  같네요.


호기심이 많아요! 공통분모를 취하는 다른 분야들을 이해하고 응용하며, 디자인 방법론을 연구, 개발, 적용하는 것에 관심이 많아요. 따라서, 학생, 실무자, 교육자 및 연구자들에게 유의미한 정보를 지속적으로 공유하려고 해요. 시대가 변하면서, 정보의 독점에서 오는 불균형을 바로 잡을 수 있는 다양한 방법이 생기는 것 같아요. 좋습니다!


시간이 얼마나 생길지는 모르겠습니다. 회사일을 하면서 먹고살아야 하고, 그때그때 개별적 프로젝트도 문의 혹은 컨설팅이 들어오고, 동시에, 유튜브 및  다양한 채널로 콘텐츠 및 질문 등을 받으며 소통을 해야 하는 부분도 있습니다. 최대한 시간을 짜내며 정보를 생산 공유해 보아요.


따라서, 이 콘텐츠를 인생 프로젝트로 생각을 하고 진행을 하고 있습니다. 스스로의 전공지식과 인생 경험을 정리하고 / 공유할 수 있는 건 행운이죠. 또 누군가에게 도움이 될 수 있다는 것만큼 의미 있는 것은 또 없을 거예요. 제가 받은 것처럼요!


원컨대, 저의 경험과 여러분들의 피드백을 바탕으로 이 책과 지식 생태계 완성해 가려고 해요(매년 새로운 버전을 출판). 때로는 여기의 글로, 비디오 강좌 및 워크숍/튜토리얼로, 생생한 인터뷰를 통해, 저의 프로젝트를  통해, 혹은 실제 코딩을 통해, 혹은 질의응답을 통해 등등의 재미있는 시도를 해보려고 합니다.


전공지식과 정보 아카이브


시대가 굉장히 빠르게 변하고 있습니다. 디자인과 기술을 이해 함해 있어서 데이터와 컴퓨테이션의 올바른 이해는 매우 중요합니다. 이 책과 플랫폼의 내용들이, 학생, 실무자 혹은 연구자들에게 좋은 지식과 정보 아카이브로 자리 잡기를 바래요!



데이터 그리고 디자인 / 컴퓨테이셔널 디자인


데이터 & 디자인 /  Data & Design / Computational Design - 한국어 비디오 / 목차

                                                                                                       Eng Video / Medium


A Table of Contents / 목차


Lecture, 컴퓨테이셔널 디자인 -  / 비디오

Lecture, 파라메트릭 디자인 -  / 비디오

        QnA 01, 어느 고등학생의 질문 / 건축 파라메트릭 디자인 예제 - 글 / 비디오

        QnA 16, 파라메트릭에 대해서 (파라메트릭과 미적분) -  / 비디오


Lecture, 건축, 조경, 도시 디자이너들을 위한 테크트리 - 글 / 비디오

Lecture, 컴퓨테이셔널 디자인을 바라보는 시각과 오해 - 글 / 비디오

Lecture, 곱하기 어떻게 볼까? 추상을 통한 상상? - 글 / 비디오


        QnA 02, 건축가의 일반적인 질문 2차 (건축 컴퓨팅 실무) - 글 / 비디오

        QnA 04, 건축 컴퓨팅을 공부하고 싶으신 건축가 형님과의 대화 - 글 / 비디오

        QnA 05, 코딩과 건축 컴퓨팅에 관심이 많으신 건축가 형님과의 대화 - 글 / 비디오

        QnA 06, 건축가의 일반적인 질문 (건축 컴퓨팅 실무응용) - 글 / 비디오

        QnA 11, 어떤 젊은 건축 디자이너의 질문 - 글 / 비디오

        QnA 15, 시각디자인 학생의 질문,  데이터 시각화, 크리에이티브 코딩, 테크니컬 아티스트 - 글 / 비디오

        QnA 19, 파라메트릭 디자인 배우려면 어디서부터 어떻게 시작해야 하나요? - 글 / 비디오

        QnA 31. 대학생의 질문, 대학교, 대학원, 파라메트릭 디자인 스튜디오 어떻게 접근할까? - 글 / 비디오

        QnA 32, 건축/컴퓨테이션/뉴미디어/디자인 직업군, 어떻게 준비하면 좋을까요? - 글 / 비디오


        QnA 23, 디자인 소프트웨어 어떻게 공부할까?  / 그 많은 것 언제 다 해요? - 글 / 비디오        

        QnA 24, 디자인 소프트웨어 어떻게 공부할까? 두 번째, NURBS , Mesh(Polygon) - 글 / 비디오

        QnA 33, 코딩 시작 시에, 필요한 수학? 과연 뭐가 필요할까? - 글 / 비디오

        

        QnA 36, 파이썬 그리고 그래픽 툴(맥스, 마야, 라이노...) - 비디오

        QnA 37, 프로덕트디자인 위한 코딩 그리고 3D 소프트웨어 공부 질문, 그리고 개인적인 생각 - 비디오

        QnA 38, 너는 어떤 프로그래밍 언어를 쓰니? - 글 / 비디오


        QnA 40, 건축 컴퓨테이셔널 유학 그리고 파이선 코딩 공부 - 비디오

        QnA 44, 네이버 카페, 그래서호퍼 챌린지 질문 / 코딩을 공부하는 자세? - 비디오

        QnA 39, 데크니컬 아티스트 공부 방법? 책? 학원? - 비디오


Talk, 힙합 문화로 보는 새로운 패러다임 그리고 컴퓨테이셔널 디자인의 운명 - 글 / 비디오


Project, Standalone CAD System Demo reel  - video

Project, Design & Computation Demo reel  - video

Project, Data-Driven Design Demo reel  - video

Project, Design & Media Demo reel  - video



Lecture, 라이노 파이썬 / Rhino Python, 공부법 - 글 / 비디오


Talk - 파이썬 (Python) 배워야 할까? 장단점을 알아보자! - 글 / 비디오

Talk - 디자이너를 위한 프로그래밍 언어 1/2  - C# - 글 / 비디오

Talk - 디자이너를 위한 프로그래밍 언어 2/2  - Typescript(Javascript) - 글 / 비디오



Geometry / 지오메트리



Lecture, 벡터 / Vector - writing / video

     

    Ex Grid System


Lecture. 포인트 / Point


    ex Point Grid A, Point Grid B


Lecture, 라인 / Line - writing / video


    ex Dynamic Bin System


Lecture, 폴리라인 / Polyline - writing / video

Lecture, Surface - writing / video

Lecture, Mesh - writing / video


Lecture, 매트릭스 / Matrix - writing / video

Lecture, 좌표계 / Coordinate system - writing / video


Lecture, 프로젝션 & 리맵 / Projection & Remap - 글 / video

Lecture, 정규화 &  보간 & 이상치 / normalization & interpolation & outlier -  글 / video

        codepen - Normalization & remap, Typescript

        codepen - interpolation, Typescript


Lecture, 자료 형식, Type of Data - writing / video


Project, Numerical Geometry and Graph Utility - link / video / pdf / download

Project, Numerical Landscape Utility - link / video / pdf / download

Project, Thermal-responsive Fabric and Blind- link / video

Project, CERAMIC MORPHOLOGIES - link


Project, Architectural Compiler for Digital Fabrication - link / video /pdf / download

Project, Strip-based Fabrication - link / video

Project, Multi-Layered Bench, Digital Fabrication - link / video


Codepen - Point, Typescript

Codepen - Line, Typescript

Codepen - Polyline, Typescript

Codepen - Curve, Typescript

Codepen - Mesh, Typescript


Dynamics / 다이내믹스


Workshop, Boid System - 글 / 비디오


Project, Numerical Dynamics Utility - link / video / pdf / download

Project, Agent-based Simulation at Sue Bierman PArk in San Francisco - link / video


    ex Dynamics Sandbox

    ex Particle Dynamics , Dynamics Spring Truss


Design Algorithm / 디자인 알고리듬


Lecture, 컴퓨테이셔널  사고 (띵킹) / Computational Thinking - 글 / 비디오


Lecture, 디자이너에게 코딩이란 / 나에게 코딩이란 - 글 / 비디오

        QnA 08, 컴퓨테이션 직업군 및 준비 자세 - 글 / 비디오


Talk - Harvard GSD Technology 그리고 MIT Computation  -  / 비디오

           지원 준비, 프로그램 비교 , 및 컴퓨테이션 공부 준비 방법 


    link Path Finder , Fire Exit , Maze Exit , Unit Moving


Lecture, 함수(Function) 디자인 그리고 Safeguard -  / 비디오


Codepen - Graph search, Javascript

Codepen - Graph search, Typescript


Data Structure for Design


Lecture, 자료구조, 그래프 / Data Structure for design , Graph 1/2 - 글 / 비디오

Lecture, 자료구조, 픽셀, 복셀 / pixel and  voxel data structure 2/2 - 글 / 비디오

        QnA 15, 복셀(Voxel)과 컴퓨테이셔널 디자인 그리고 건축 디자인 - 글 / 비디오



Lecture 1. 데이터 & 디자인 / Data & Design - 비디오

Lecture 2. 디자이너를 위한 컴퓨테이셔널 팅킹 / Computational Thinking For Designer - 비디오

Lecture 3. 캐드, 데이트의 흐름 / CAD data pipeline - 비디오

Lecture 4. 이산 도시공간과 연결성 (그래프)/Discrete Urban Space and Connectivity (Graph) - 비디오

Lecture 5. 데이터 구조로서의 지오메트리 그리고 시각화 / Geometry as data and Visualization - 비디오



Lecture, 코딩 공부 어떻게? (잔소리 포함) / 제발 타이핑해보자!! -  / 비디오


Project, Numerical Urban Utility - link / video / pdf / download

CodePen Collection


Codepen - DataStructure processing JSON

Codepen - Parse OBJ & STL format 

Codepen - DataStructure Class Basic


Data Structure for Computational Design collection, Typescirpt - link

Codepen - String

Codepen - Array

Codepen - Map(hash table) 

Codepen - Linked list

Codepen - Graph

Codepen - Scalar (numeric)

Codepen - Vector (array & list)

Codepen - Pixels (matrix)

Codepen - Voxels (tensor)

Codepen - Color (object)



Discretization


Lecture Discretization - 글 / 비디오

Lecture Curve - 글 / 비디오

Lecture 2D space - 글 / 비디오

Lecture 3D space - 글 / 비디오



Image / CV(Computer Vision)


Lecture, Image as Data - 글 / 비디오

Lecture, Convolutional Filter - 글 / 비디오


Workshop, Color manipulation(convert or interpolation...) - 글 / 비디오


Project, Numerical Image Utility - link / video / pdf / download


OOP / Agent-based Design System


Lecture, 쉽게 이해하는 클래스(Class) - 글 / 비디오


Optimization

Workshop, Rect-Optimization - 글 / 비디오 / link


Project, Parkerator V1 and V2 - link / video V1 / video V2

Project, Column Distribution and Thickness Optimization - link /  video

Project, Small Environment [Immersive Landscape] - link / video


link Ball bounce



HCI (Human–computer interaction)


Project, SketchHand - link / video

Project, InterActivity - video

Project, Landbox AR - link / video


Architecture / Pipeline / Development


Lecture, Active Command - 액티브 커멘드 - 글 / 비디오

Lecture, Mouse Event / 마우스 이벤트 - 글 / 비디오


HTML Canvas Optimization of Rendering Loop with JSAPI for Drawing on Map - medium

Project, Expressmap, ESRI - video / tutorial


Visualization / Mapping


Lecture, 데이터 시각화 / Data Visualization - 글 / 비디오

        QnA 07, 데이터 시각화 도구(tools) 그리고 개인적인 생각 - 글 / 비디오

        QnA 12, 데이터 시각화가 꿈인 카이스트 학생의 질문 - 글 / 비디오


Lecture, 매핑 (건축, 도시) / Mapping for Urban and Architecture - 글 / 비디오

Lecture, HTML Canvas, 데이터 시각화, 크리에이티브 코딩 - 글 / 비디오


Lecture, GeoJson - 글 / 비디오

Lecture, TopoJson - 글 / 비디오


Project, Numerical Mapping Utility - link / video /pdf / download

Project, Street events Mapping in SF - link / video


link ArcGIS JSAPI Sandbox , Mapbox Sandbox


Codepen - ArcGIS JSAPI Stater, Javascript

Codepen - ArcGIS JavaScript Tutorials: Create a Starter App


Design Visualization / 디자인 시각화


Lecture, 3D Visualization at Harvard GSD & MIT - link

Lecture, Post-Production in Design Visualization at Harvard GSD & MIT - link

Talk, 2016 Introduction To 3D Visualization Workshop at Harvard GSD and MIT - Video


QnA 23, 디자인 소프트웨어 어떻게 공부할까? - 글 / 비디오

QnA 41, 데이터를 활용한 도시 설계? 공부 전략? 

               그리고 엠아이티 센서블씨티(MIT SENSEable City Lab) 연구소 - 비디오

QnA 42, 시각디자인 전공, 학생의 질문, 데이터 시각화 어떻게 공부할것인가? - 비디오


Lecture, 건축 시각화 / Architectural Visualization - 글 / 비디오

Lecture, 도시, 건축 렌더링 팁 / Architectural & Urban Rendering tips - 글 / 비디오

Lecture, 건축 3D 랜더링에 관한, 어느 건축가의 질문들… - 글 / 비디오


Project, Architectural Visualization emo reel - video

Project, Digital Mockup - video

Project, Plugin, Ant for Animation in 3ds max - link


Workshop - Design Visualization - 바로가기


AI(Artificial Intelligence)  & ML(Macine Larning)


QnA 14, 디자인(건축), 빅데이터, 그리고 인공지능(머신러닝)에 대한 질문 - 글 / 비디오


Project, Smart Drawing - 글 / 비디오 / 데모

Project, Remixing & Resampling Three Dimmensional Objects,

               Use of Volumentric Representation and Machine Learning in Design  - link / video


Project, Politics of Space and Its Shadows - link / video


Project, Built Environment Assessment - link / video

             Analytical hosing prediction model with spatial observation in City of Boston


    link 4-Smart Drawing

    link Linear-regression , Polynomial Regression ,  Regression Model , XOR


Codepen - Tensorflow playground stater, Typescript


Research & Project


Research Project, Third Place, Media Lab, 컴퓨테이셔널 디자인 프로젝트 - 글 / 링크 / 비디오

                Paper Presentation & Panel Discussion at DigitalFUTURES World 2020 - 비디오


Design & Data, NumericalUtility 소개와 설치 - 글  / 비디오

Design & Data, Numerical Geometry Utility - 글 / 링크 / 비디오

Design & Data, Numerical Dynamic & Graph Utility - 글 / 링크 / 비디오

Design & Data, Numerical Environment Utility - 글 / 링크 / 비디오

Design & Data, Numerical Urban Utility  - 글 / 링크 / 비디오

Design & Data, Numerical Mapping Utility - 글 / 링크 / 비디오

Design & Data, Numerical Image Utility  - 글 / 링크 / 비디오


Digital Fabrication, Architectural Compiler  - 글 / 링크 / 비디오



Development / Plugin / Addon


라이노(Rhino3d) C# 코드 라이브러리 만들기 / How to create c# lib for Grasshopper - 글 / 비디오 

래빗(Revit), 다이나모 플러그인 만들기 / ZeroTouch For Dynamo, Revit - 글 / 비디오

라이노(Rhino) 플러그(Plugin)인 어떻게 만들까? - 글 / 비디오

라이노(Rhino) 그라스하퍼(Grasshopper) 애드온(Addon) 어떻게 만들까? - 글 / 비디오



VR/ AR , Unity


유니티(Unity)에서 라이노 기능(API) 사용하기? - 글 / 비디오


Talk - VR / AR 꼭 해야 할까? - 글 / 비디오


WebGL

Workshop, Basic pipeline - writing / video


    link WebGL 1 starter , WebGL 2 starter, THREE starter

    link Rhino Viewer


HTML Canvas

    link HTML Canvas starter


    Codepen - HTML Canvas stater


HTML SVG

    link HTML SVG starter


OpenGL

Project, Landbox standalone - link / video

Project, SketchHand - link / video


Shader GLSL

Workshop GLSL - 글 / 비디오

    ex GLSL starter


Codepen - GLSL starter, WebGL, Typescript


Interview and Talk


Talk, 건축, 도시재생 형형칠 박사 - 글 / 비디오


Talk 신희찬, 나의 소개 및 내가 생각하는 BIM 건축 1/9 - 글 / 비디오

Talk 신희찬, BIM을 하고 싶은 학생들에게 2/9 - 글 / 비디오

Talk 신희찬, BIM을 하고 싶은 실무자에게  3/9 - 글 / 비디오

Talk 신희찬, 앞으로의 계획, 그리고 내가 그리는 미래 4/9 - 글 / 비디오

Talk 신희찬, 유학에 대한 개인적인 생각, 경험 , 그리고 벨류 엔지니어링 5/9 - 글 / 비디오

Talk 신희찬, 한국에서, BIM의 문제점 그리고 건축산업? 6/9 - 글 / 비디오

Talk 신희찬, 내가 생각하는 컴퓨테이셔널 디자인과 코딩, 그리고 툴 개발 7/9 - 글 / 비디오

Talk 신희찬, 신희찬, 개인적인 질문들: 이메일 관리, 관심 있는 앱,  그리고 이것저것 8/9 - 글 / 비디오

Talk 신희찬, 나의 자유시간 9/9 - 글 / 비디오


Talk 신희찬, Arup 가는 길, 사무실 구경 1/6  - 글 / 비디오

Talk 신희찬, 구독자 피드백 - 글 1 / 비디오 1, 글 2 / 비디오 2

Talk 신희찬, 우리의 피드백 그리고 잡담 - 글 1 / 비디오 1 , 글 2 / 비디오 2 , 글 3 / 비디오 3


Talk 신희찬, 빔(BIM)과 컴퓨테이셔널 디자인(Computational Design) 질문 답변 그리고 수다

                    글 1 / 비디오 1 , 글 2 / 비디오 2


Talk 임희준,  도시디자인,  데이터(컴퓨테이션, 시각화) 그리고 수다 - 글 1 / 비디오 1 , 글 2 / 비디오 2


Talk 이규환, 건축, 로봇틱스 그리고 페브리케이션 (Construction Automation) 1/2 -  

                          글 1 / 비디오 1, 글 2 / 비디오 2


Talk 성우제, 건축 그리고 컴퓨테이셔널 디자인 - 소개 비디오 / 라이브 비디오


Talk 김동일, 건축, 페브리케이션 그리고 컴퓨테이션 - 소개 비디오 / 라이브 비디오




Code For Design Group

Never Cafe - link

01 - 김건웅(ComAr), 파일 포멧 / 패턴 - 비디오

02 - 이수민, 코딩공부를 위한 노션 사용법 그리고 PD vs GD vs AD 용어 설명 - 비디오




ETC

QnA 03, 컴퓨터 고르는 법 ( 건축 3D  /  크리에이티브 코딩 ) - 글 / 비디오


QnA 17, 내가 생각하는 그라스하퍼(Rhino Grasshopper)의 단점과 개인적인 생각 - 글 / 비디오

QnA 22, 내가 생각하는 그라스하퍼(Rhino Grasshopper)의 장점 - 글 / 비디오


QnA 21, 5G 기술과 건축산업(설계 협업 및 시각화 VR), 정말 유용 하나? - 글 / 비디오


VLog 레이저 블레이드 2020(코딩, 렌더링 노트북), 15 advanced 언박싱 그리고 개인적인 생각 - 비디오


WORKSHOP

Lecture, 내가 생각하는 컴퓨테이셔널 디자인 / 워크숍 강좌를 만드는 배경 -  / 비디오


Workshop, Data & Design

DataStructure & Design Algorithm,

Introduction to Computational Design


Workshop, Rhino3D Python

Geometry & Computation & RhinoCommon API

Workshop  -  Rhino3D Python scripting


Workshop, Rhino3D C#

라이노(Rhino) 그라스하퍼(Grasshopper)와 c#코딩(coding) 동시에 공부하자!

그라스하퍼 그리고 코딩(C#) Design Scripting Workshop


Workshop, Data and Visualization, Python

Code and data for Designers or Creative coders

디자이너를 위한 파이썬, 디자인 그리고 시각화


Workshop, Mapping and Visualization

Code and data for Designers or Creative coders, using HTML Canvas API

매핑 그리고 시각화 (Web base)


Woskshop, Rhino Python Mapping

Code and data for Designers or Creative coders, using RhinoCommon API

라이노 파이썬 매핑 파이썬


Woskshop, 2020 SA(Social Algorithms) 7.0 - website

Title: Discrete Urban Space and Connectivity

워크숍 광고/소개 - 비디오

        QnA 43, SA 7.0 Unit 2 관련 질문 / 스스로 공부하는 방법 - 비디오




Woskshop, Computational design and Visualization
DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops

Code and data for Designers or Creative coders, using HTML Canvas, Typesciprt, Python

워크숍 광고/소개 - 비디오

데이터 프로세싱

컴퓨테이셔널 지오메트리

디지털 매핑


Mapping & Data Viz workshop

Codepen - 1. typescript basic and drawing points 

Codepen - 2. typescript basic and drawing lines

Codepen - 3. typescript basic and interactive drawing points and lines

Codepen - 4. HTML Canvas API

Codepen - 5. Point class

Codepen - 6. Line class

Codepen - 7. Area class

Codepen - 8. GeoJSON


Mapping, Amchart

Codepen - 1.basic

Codepen - 2. projection


Mapping, D3



Workshop, Threejs

Real-time Graphics for Designers or Creative coders

Codepen collection


Codepen - 1. Three stater

Codepen - 2. Primitives

Codepen - 3. Point

Codepen - 4. Custom mesh

Codepen - 5. Mesh from Rhino3d

Codepen - 6. Picking

Codepen - 7Globe and projection

Codepen - 8Terrain, pixel map(matrix) 

Codepen - 9Voxel map

Codepen - 10. Loader, OBJ format


Codepen - AFrame Stater






Workshop, Unity3d

Real-time Graphics for Designers or Creative coders



Workshop, Creative Coding

Design & Code for Designers or Creative coders



Workshop, GLSL Shader

Design & Code for Designers or Creative coders



Workshop, Design, Data & AI

Design & Code for Designers or Creative coders



Workshop, Design Visualization - Rendering, Animating, effecting

Rendering, animating, effecting using 3ds max, aftereffect



진로상담/취직 유학-건축/컴퓨테이션

진로상담/취직 유학-건축/컴퓨테이션





Revision 03

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

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

감사합니다.



이남주 / 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) 







매거진의 이전글 파라메트릭 디자인에 대한 질문

매거진 선택

키워드 선택 0 / 3 0

댓글여부

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