Figma vs HTML 비교 리뷰

빨간 테두리 = Figma 원본  |  초록 테두리 = HTML 블록
Frame 2 — Solution 제작 목표 (hero-icon-cards)
Figma Original
Frame 2
HTML Block
디지털전환은 사용자(발주자, 수급자, 엔지니어)가
쉽고, 편하고, 편익이 있어야만 한다.
Solution 제작 목표
🤲
Easy Like
Breath
(쉬운 이해)
💡
Convenient
Intuition
(직관적 사용성)
✅
Ultra High
Quality
(초고품질)
💰
Super Low
Cost
(극저비용)
⚡
As Fast As
Lightning
(초단축)
Frame 3 — 정책 달성 (compare-2col-badge)
Figma Original
Frame 3
HTML Block
정책 달성
Engn. Solution
목적 시설물에 대한 설계, 시공, 유지관리 정보를 고객이 쉽고 편리하게 사용하고, 편익이 발생하도록 제공하는 다양한 형태의 정보물과 이를 구현할 수 있는 S/W 및 H/W와 그 기술을 포함하는 서비스
DfMA
Design for Manufacture and Assembly는 공장 생산, 현장조립이 가능한 설계를 의미하며, 현장 중심의 건설에서 공장 생산 방식으로 전환하는 OSC(Off Site Construction) 시스템을 위한 핵심기술
디지털전환은 사용자(발주자, 수급자, 엔지니어)가
쉽고, 편하고, 편익이 있어야만 한다.
Frame 4 — 과정 vs 결과의 혁신 (compare-detail-gradient)
Figma Original
Frame 4
HTML Block
과정 (Process)의 혁신
결과 (Products)의 혁신
Analogue 개념 기반 업무의 Digital Transformation
개념, 도서, 행정 절차 중심
2D 도면, 전문가, 규정
업무 구분(단절), 책임
→
시각화된 목적물, 소통, 투명성 중심
3D 모델, 참여자, 실체
협업(융·복합), 창의성
Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상
과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물
위치기반의 3D 모델을 사용하는 Process 혁신
위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신
Analogue 기반 도서 외 Digital 기반 정보물 추가
규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물 추가
사용자 중심의 Solution(S/W) 제공
인프라 건설산업의 1차적인 Process 혁신은 속성이 포함된 수치지형도와 3D 지반모델 구축 필수
설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W로 기술 축적
Solution을 이용한 업무효율화
디지털 기반 Graphic 중심의 3D 모델, 시뮬레이션 활용을 위한 공학용 사이니지 시스템 필수
Engn. Solution을 통해 프로젝트 이슈를 함께 검토하고 디지털 데이터로 통합관리
DX 시행을 위한 필수 요건 — 순환 궤도 (cycle-orbit)
Figma Original
Cycle Orbit
HTML Block
DX 시행을 위한 필수 요건
» » » » » » 👥 사람 (역량) 혁신적 사고방식 • 창의적 문제 해결 • 사용자 중심 접근 🖥 기술 (디지털) Digital 기술과 업무 프로세스 통합 • 건설 전문 지식 보유 • 최신 기술 트랜드 이해 📋 자연 (여건) 지속적 투자 의지 • 실행 추진력 • 변화를 통한 가치 창출
체크리스트 다크 (checklist-dark)
Figma Original
Checklist Dark
HTML Block
☑
융합의 필요성 : Engineering과 IT 기술의 융합, 정밀한 설계정보
☑
S/W 개발 목표 설정 : 명확한 Target 설정, 단계별 목표설정 후 시스템 구성 필요
☑
기술기반 중요성 : 자체기술 확보, 제대로 된 실시구현으로 지식의 중요성 강조
☑
기존 S/W 한계인식 : 다순 설계 중심 S/W 탈피, 엔지니어 전문 지식&새로운 기술 융합
☑
디지털 전환&직관지역할 : 디지털 역량을 갖춘 석간지를 통해 기술건축, 전문가기술의 디지털화
☑
품질향상&호환성 : 더 높은 품질의 성과를 생산 및 다양한 S/W와의 호환성을 고려한 개발필요
중앙 라벨 2열 시스템 구성 (system-2col-center)
Figma Original
System 2Col
HTML Block
H/W
S/W
Display
범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용
Server & Storage
방대한 건설현장 데이터를 안전하게 저장하고 관리
Network
네트워크 서비스를 통한 실시간 데이터 수집 및 연계
CCTV
각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행 모니터링
System
구성
C.C.P
사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인
WatchBIM
공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션으로 확인
Domainer
시공단계에서 민원 및 용지보상과 관련한 업무 수행 솔루션
bCMf
건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행
중앙 라벨 2열 시스템 구성 — 구조화 버전 (system-2col-center v2)
Figma Original (Frame/Group 정리 후)
System Structured
HTML Block (구조화 데이터 기반)
System 구성 BIG Room H/W S/W Display 범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용하여 벡터기반 도면, 3D정보 모델을 높은 정밀도로 표현 Server & Storage 방대한 건설현장 데이터를 안전하게 저장하고 관리, 시공 및 공정, 기성 등 데이터베이스화 Network 네트워크 서비스를 통한 실시간 데이터 수집 및 연계, 위치기반 안전관리, SaaS 기반 실시간 데이터 공유 회의시스템 공사 현장, 개별 공구별 사무실, 사업단 회의시스템을 구축하여 신속한 의사결정을 바탕으로 업무효율성 증대 CCTV 각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행과정과 위험 요소를 지속적으로 모니터링하여 사고를 사전 예방 Dron Broadcasting 드론을 활용하여 건설 현장을 촬영하고 구조물의 상태를 실시간으로 확인 함으로써 공사의 품질 향상 Sensor 현장에 IoT 위치기반 센서를 설치하여 사전에 균열, 진동, 기울기의 변화 등 위험요소를 실시간으로 확인 C.C.P 사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인, 협업하는 효율적인 공사단계 프로세스 WatchBIM 공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션을 통해 현장 공사진행사항을 확인 Domainer 시공단계에서 민원 및 용지보상과 관련한 업무를 수행하는 솔루션으로 지번검색, 계약사항, 일정관리 bCMf 건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행할 수 있는 BIM기반 현장 맞춤형 Twin Highway 준공 후 가상세계의 정보모델을 실시간 데이터와 연결하여 다양한 시뮬레이션을 통해 효율적 관리 B.E.Ps <참고> 건설산업의 디지털전환을 위한 개념 및 BIM 수행을 위한 방법, 예시, 사례들을 모아놓은 시공 BIM 수행지침
필수조건 — 카테고리 스트립 테이블 (category-strip-table)
Figma Original
Strip Table
HTML Block
技 術
깊은 기반 (건설산업, 토목) 지식
건설단계별 근본적인 이해와 경험이 기반된 높은 전문지식 보유
높은 S/W 기술 (Digital Technology)
다양한 기술적도구(S/W,H/W)와 Process의 효과적인 통합
人 材
분야별 전문지식 역량을 갖춘 기술자
엔지니어의 Know-how와 디지털지식이 융합된 지식의 축적
디지털화 역량 및 개발경험 많은 개발자
다양한 형태의 Solution S/W 개발 역량 Programmer
天 地
받아들일 수 있는 사회·기업·제도 등의 여건
목표설정형 지침에서 탈피하여 수행사례, 효과검증을 통해 시행
지속적·장기적 투자를 수행할 능력과 의지
기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자