3D 메쉬 생성 과정에서 Triangulating Facets 프로세스는 해상도가 높아질수록 복잡해집니다. 특히 RefineToPolygonalFacet() 메소드에서 발생하는 멀티스레드 충돌 문제로 인해 특정 쓰레드에서 "Key를 찾을 수 없음" 에러가 빈번히 발생했습니다. 이는 프로그램 성능 저하뿐 아니라 데이터 일관성 문제로 이어지며, 이 문제를 해결하여 고해상도 환경에서도 안정적인 메쉬 생성을 보장하는 것이 목표입니다.

2. 문제 분석 및 해결 방안

문제 분석:

• RefineToPolygonalFacet() 메소드의 멀티 스레딩 처리 중, 점 삭제 및 수정 작업으로 인해 여러 쓰레드가 동시에 동일한 메모리에 접근하게 됩니다.
• 이 메소드는 Polygons라는 전역 변수를 사용하며, 스레드가 이 변수를 참조하는 동안 다른 스레드가 점을 삭제하거나 수정할 경우, 해당 자원이 누락되어 Key Error가 발생하는 구조였습니다. 각각의 쓰레드가 자원을 참조하고 있을 때 Thread_1이 하나의 포인트를 삭제(소실)했을 때

문제 해결 방안:

• 스레드 안전성 확보: 전역 변수 Polygons의 공유 접근을 방지하기 위해 쓰레드 동기화 전략을 도입합니다.
• 데이터 수정 방식 변경: 메모리 공유를 최소화하여 독립적인 데이터 처리를 보장합니다. 이를 위해 로컬 변수로 데이터를 복제한 후, 개별 스레드에서 필요한 작업을 수행하도록 변경하였습니다.

3. 구현 과정과 기술 스택

• 락(lock) 기법 적용: 각 스레드가 데이터를 수정할 때 락을 사용해 한 번에 하나의 스레드만 자원에 접근하도록 설정했습니다. 이를 통해 다른 스레드에서 점이 소실되는 현상을 방지할 수 있었습니다.
• 데이터 복제 방식 채택: 각 스레드에서 Polygons를 참조하지 않고 개별 복제본을 생성하여 작업하도록 설계함으로써 스레드 간 데이터 충돌을 방지했습니다.
• 에러 재현 및 검증: 문제를 정확히 이해하기 위해 다양한 해상도에서 테스트를 거치며 에러 상황을 재현하고, 이후 해결 방안 적용 후의 안정성을 검증하였습니다.

4. 성과 및 지표

• 프로그램 안정성 향상: 멀티 스레드 작업 시 데이터 충돌 문제가 완화되면서 고해상도 메쉬 생성 시에도 안정성이 크게 개선되었습니다.
• 처리 속도 최적화: 동기화로 인한 약간의 속도 저하는 있었지만, 전체 프로세스의 안정성이 향상되어 큰 문제 없이 고해상도 처리까지 가능해졌습니다.
• 메모리 사용 최적화: 데이터 복제를 통해 필요 이상의 메모리 사용을 줄이고, 데이터 접근 시간을 줄여 성능을 유지했습니다.

5. 향후 계획 및 비전

멀티 스레드 작업 시 전역 변수 사용은 불가피하게 안정성 문제를 야기할 수 있습니다. 앞으로는 스레드 안전성을 보장할 수 있는 디자인 패턴을 활용해 데이터 충돌을 방지하고, 고해상도에서도 높은 성능을 유지할 수 있는 프로그램을 설계하겠습니다. 지속적인 테스트와 최적화를 통해 더욱 효율적인 3D 메쉬 생성 프로세스를 완성할 계획입니다.

마무리

"이번 개선은 고해상도 3D 메쉬 작업에서의 멀티 스레드 충돌 문제를 해결하여, 높은 해상도에서도 안정적이고 효율적인 성능을 제공할 수 있도록 한 중요한 전환점이었습니다. 앞으로도 기술적 문제를 체계적으로 분석하고 개선하여 최적의 성능과 확장성을 목표로 프로그램을 발전시키겠습니다."

초기 코드에서 전극의 타입별로 여러 생성자를 오버로딩하고 각 객체를 생성하는 방식으로 설계가 이루어졌습니다. 초반에는 명확한 요구 사항과 정해진 규격에 맞춰 기능이 안정적으로 작동했지만, 프로그램이 점차 업데이트되면서 새로운 요구 사항이 추가됨에 따라 기존 설계의 한계가 명확해졌습니다. 확장성과 유지보수성을 보장하는 설계가 필수적이라 판단하여, 근본적인 코드 개선을 검토하게 되었습니다.

초기코드(아래)

2. 문제 분석 및 해결 방안

초기 코드에서 발견된 주요 문제점은 다음과 같습니다:

1. 객체 관리 문제: 전극의 모양별로 객체 관리를 위한 구조가 부족하여, 각 타입의 전극 객체를 효율적으로 관리하기 어려웠습니다.

2. 과도한 생성자: 생성자가 많아지면서 코드의 가독성이 떨어졌으며, 코드 유지보수에도 부담이 생겼습니다.

3. 복잡한 메소드 호출: 메소드 호출 케이스가 너무 다양하게 분산되어 있어 코드의 흐름을 한눈에 파악하기 어려웠습니다.

4. 확장성 부족: 프로그램이 점점 확장되면서 요구사항 변경 시 코드 수정이 불가피해졌습니다.

이러한 문제를 해결하기 위해 빌더 패턴을 도입하여 각 단점을 보완하고 프로그램의 확장성을 확보했습니다.

3. 구현 과정과 기술 스택

• 빌더 패턴 적용: 빌더 패턴을 사용해 전극 객체 생성을 체계화하였습니다. 이를 통해 객체 생성을 더 명확하게 하고, 각 전극 타입에 맞는 생성 옵션을 유연하게 처리할 수 있도록 개선했습니다.
• 코드 설계 리뷰: 초기 코드를 통해 소장님과 협의한 결과, “프로그램 확장성이 부족해, 향후 요구사항에 따라 코드 수정이 불가피할 것”이라는 점을 피드백했습니다. 이에 따라 빌더 패턴을 적용한 개선안을 제안하고 검토를 거쳐 적용하게 되었습니다.
• 단순화된 생성 구조: 생성자 오버로딩의 필요성을 줄이고 각 전극 타입별 특성을 반영한 객체 생성이 가능하도록 설계를 단순화했습니다.

4. 성과 및 지표

코드 개선 후 얻어진 주요 성과는 다음과 같습니다:

• 유지보수성 향상: 기존에 비해 객체 생성 방식을 일관되게 통제할 수 있어 코드의 가독성과 유지보수성이 크게 개선되었습니다.
• 확장성 확보: 요구사항이 추가되더라도 기존 코드 구조를 변경할 필요 없이 확장이 가능해졌습니다.
• 효율적인 객체 관리: 전극의 모양에 따라 객체가 체계적으로 생성되어 관리가 용이해졌습니다.
• 코드 복잡도 감소: 메소드 호출이 단순화되어, 코드 흐름이 명확해졌습니다. (전) (후)

5. 향후 계획 및 비전

이번 개선을 통해 전극 타입별 객체 생성 구조가 확장성을 고려한 형태로 전환되었습니다. 앞으로도 빌더 패턴과 같은 디자인 패턴을 적용하여 코드의 유지보수성과 확장성을 지속적으로 개선할 예정입니다. 향후 새로운 전극 타입이나 요구사항이 추가되더라도 코드 수정 없이 효율적으로 대응할 수 있는 시스템을 구축해 나가겠습니다.

마무리

"이번 코드 개선은 단순한 기능 확장이 아닌, 프로그램 전반의 확장성과 유지보수성을 고려한 근본적인 접근이었습니다. 앞으로도 기술적 혁신을 바탕으로 한 사용자 중심의 개선을 통해 더욱 강력하고 유연한 프로그램을 제공하겠습니다."

DICOM정보를 가져온 후 병원 관계자 (의사 혹은 의학물리학자, 방사선사)가 쉽게 정보를 파악할 수 있는 UI를 대학원에서 연구하면서 생각했다.

이런 컨샙으로 Study에 관련된 DICOM Tag들을 우선적으로 보여주어 직관적으로 알아볼 수 있게 구상했다.

IOS 디자인을 참고하여 날짜별로 환자를 관리하거나 DICOM 데이터들의 정보를 축약하여 볼 수 있게 만들었다. (역시 IOS 디자인은 최고다)

천체적인 구조는 이렇게 됩니다. 환자 리스트, 날짜별 이벤트, 데이터 관리, 서버 연결, User관리 등등 모든 기능을 함축적으로 나타내기위해 디자인했는데 조금 어수선한 느낌이 있네요.

목차

용어

• SCP : Server Class Provider , Server 역할
• SCU : Server Class User, Client 역할
• AE : Application Entity, Network내에 특정 Application
• IOD : Information Object Definition, 데이터를 이루는 정보(IOD종류)
• SOP : Service-Object Pair, Service는 주로 Command를 의미 Object는 IOD를 의미
  • DIMSE Service-IOD,
  • (명령어-정보) 조합
• DIMSE : DICOM DICOM Message Service Element, AE 간의 메시지 교환을 위한 메커니즘
• DIMSE-C : Those services application to Composite SOP Instances, DIMSE 메세지 교환 메커니즘 중 하나를 의미

DIMSE-C Services

• C-STORE: 영상이나 문서 같은 DICOM 객체들을 저장하기 위한 서비스입니다.

  C-STORE Services

• C-GET: 서버로부터 DICOM 객체를 직접 요청하고 전송받기 위한 서비스입니다. 서버는 C-GET 요청을 받은 후 요청한 객체들을 클라이언트에게 직접 전송합니다.

  C-GET  Services

• C-MOVE: 지정된 DICOM 객체들을 서버로부터 다른 대상(AE)으로 전송하도록 요청하는 서비스입니다. 여기서는 요청 받은 서버가 대상 AE로 객체를 전송합니다.

  C-MOVE Services

• C-FIND: 부합하는 조건의 DICOM 객체를 찾기 위한 요청을 하는 서비스입니다. 예를 들어, 특정 환자의 의료 기록이나 영상을 검색할 때 사용할 수 있습니다.

  C-FIND Services

• C-ECHO: 연결 상태를 확인하는 테스트용 서비스입니다.

  C-ECHO Services

C-GET vs C-MOVE

C-MOVE와 C-GET의 차이점

• C-MOVE와 C-GET은 모두 Query/Retrieve 서비스입니다만, 주된 차이점은 데이터의 전송 대상에 있습니다. C-GET은 데이터를 요청한 클라이언트에게 직접 전송하는 반면, C-MOVE는 요청한 클라이언트가 지정한 다른 AE로 데이터를 전송합니다.
• 결론적으로 C-MOVE는 C-GET에 비해 데이터 전송을 더 효율적으로 관리할 수 있으므로 대체로 더 많이 사용되는 프로토콜입니다.

C-GET과 C-Store의 차이

C-GET 서비스란?

• C-GET 서비스는 DICOM Query/Retrieve 프로토콜의 일환으로, 클라이언트가 서버에게 특정 조건에 맞는 데이터를 요청하고, 해당 데이터를 직접적으로 받는 과정에서 사용됩니다. 즉, C-GET 명령을 통해 데이터를 요청하면, 서버는 따로 다른 노드(node)에 데이터를 보내는 대신, 요청한 클라이언트에게 직접 데이터를 전송합니다.

C-STORE 서비스란?

• C-STORE 서비스는 단일 DICOM 객체를 목적지 AE로 전송하고 저장하도록 요청하는 서비스입니다. 이는 일반적으로 'DICOM Push'라고도 불리며, 의료 이미지나 기타 DICOM 객체를 PACS나 다른 DICOM 장비로 보낼 때 사용됩니다.

C-GET과 C-STORE의 핵심 차이점

• 데이터 전송 방식: C-GET은 요청자에게 직접 데이터를 전송하는 반면, C-STORE는 목적지 AE에 데이터를 "푸시(push)"하는 방식입니다.
• 데이터 흐름: C-GET의 경우 데이터 흐름은 클라이언트와 서버 간 양방향이 되며, C-STORE는 일방향으로 데이터가 전송됩니다.
• 네트워크 사용: C-GET은 네트워크 사용이 더 복잡할 수 있으나, 서버가 요청자 측의 구성을 몰라도 됩니다. C-STORE는 네트워크 사용이 상대적으로 간단하지만, 응답자가 클라이언트의 데이터를 받을 준비가 되어 있어야 합니다.

참고 문헌

7.5 DIMSE Services

DICOM Viewer 와 PACS

• 내부적으로 기능을 어떻게 구현하는지 감추는 것
• 캡슐화를 통해 객체간의 의존성을 관리할 수 있고 이를 통해 결합도가 낮은 객체를 만들 수 있습니다.
• 그 결과 유지보수가 쉬운 코드를 만들 수 있습니다.
• (객체를 수정할 일이 있을때 다른 객체에 영향을 주지 않으니 그것만 변경하면 되서 쉬운 유지보수가 가능한것입니다.)
• 대표적인 예로 private 과 같은 접근제어자를 활용해 접근을 제한하는 방법이 있습니다.

상속

• 부모 클래스의 변수와 메소드를 자식 클래스가 물려 받아서 쓸 수 있는 것.
• 기능을 쉽게 가져다 쓸 수 있고 불필요한 코드를 줄일 수 있어 보다 효율적인 코딩이 가능합니다.

다형성

• 같은 코드가 다른 행위를 하는 것을 말한다.

( 다형성은 개념이 좀 모호한 것 같습니다. 예시를 통해 먼저 알아보겠습니다.)

예시1)

• 탱크 게임이 있습니다. 거기에는 tank 라는 객체가 있고 이를 상속받는 주인공tank와 적tank 객체가 있습니다.
• 이들은 모두 tank 객체의 attack()이라는 메서드를 상속받아서 구현하는데 서로 다르게 구현합니다 주인공tank의 attack()은 전의 위치를 입력하면 일정 데미지를 주는 로직이고 적tank는 주인공 tank가 일정 범위에 들어왔을때 일정 시간 간격으로 특정 데미지를 주는 형식입니다.

예시2)

• 계산기 기능 중 plus()라는 더하기 메서드가 있습니다. plus(1,2)처럼 두 개의 매개변수가 들어가서 계산을 수행할 수도 있고 plus(1,2,3) 처럼 3가지 매개변수가 들어가서 계산을 수행할 수도 있습니다.

첫번째 예시는 Overriding의 개념입니다.

상속받은 메소드 내의 로직을 새롭게 정의하는 것을 말합니다. 이처럼 같은 이름이지만 구현하는 클래스마다 다른 역할을 하는 것입니다.

두번째 예시는 Overloading의 개녑입니다.

오버로딩은 하나의 클래스에서 같은 이름의 메소드를을 여러 개 가질 수 있게 하는 것이지요.

다양한 매개변수를 처리할 수 있게 해주기 위함입니다.

<처음 앱의 구성입니다.> 이미지를 최대한 활용하였습니다.

<구현된 페이지> 이미지는 저작권이 없는 무료 이미지를 사용하였습니다. 제가 원하던 이미지가 없어서 이미지 부분이 많이 아쉬웠습니다.

<실제 구현 코드입니다.>

import 'package:flutter/material.dart';
import 'package:grade_protector/screen/Quiz.dart';
import 'package:grade_protector/screen/Task.dart';

import 'Lec.dart';

class Scroll_Page extends StatefulWidget {
  @override
  _Scroll_PageState createState() => _Scroll_PageState();
}

class _Scroll_PageState extends State<Scroll_Page> {
  final img= [
    "image/lec1.png",
    "image/quize1.png",
    "image/task1.png",
  ];
  final texts=["강의","퀴즈","과제"];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage("image/pexels-moose-photos-1037995.jpg"),
                fit: BoxFit.cover
            )
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            leading: IconButton(
              color: Colors.black,
              icon: Icon(Icons.arrow_back_ios),
              onPressed: (){
                Navigator.of(context).pop();
              },
            ),
          ),
          body: ListView.separated(
              separatorBuilder:(BuildContext context,int index){
                return SizedBox(
                  height: 80,
                );
              },
              padding: EdgeInsets.only(top: 70,left: 10,right: 10),
              itemCount: 3,
              itemBuilder: (BuildContext context, int index){
                return Hero(
                  tag: texts[index],
                  child: FlatButton(
                    onPressed: (){
                     Navigator.push(context, MaterialPageRoute(builder: (_){
                       return index==0?Lec(img[index]):index==1?Quize(img[index]):Task(img[index]);
                     }));
                    },
                    child: Stack(
                      children: [
                        Container(
                          height: MediaQuery.of(context).size.height*0.43,
                          padding: EdgeInsets.only(top: 30,bottom: 30),
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage(
                                      img[index]
                                  ),
                                  fit: BoxFit.fill
                              ),
                              color: Colors.lightBlue,
                              borderRadius: BorderRadius.all(Radius.circular(60))
                          ),
                        ),
                        Positioned(
                            top: 30,
                            right: 70,
                            child: Text(texts[index],
                              style: TextStyle(
                                  fontWeight: FontWeight.w600,
                                  color: Colors.black,
                                  fontSize: 45
                              ),))
                      ],
                    ),
                  ),
                );
              }),
        ),
      ),
    );
  }
}

<실제 구현>

아직 백이 준비가 안됐기 때문에 이미지와 제목은 공백으로 남겨 두었습니다. 앱의 대표 컬러는 민트와 화이트레드이기때문에 투톤에 맞는 디자인을 짜보았습니다.

<구현 코드입니다.(flutter)>

import 'package:flutter/material.dart';
import 'package:grade_protector/APi/Api.dart';
import 'package:grade_protector/Color/colors.dart';
import 'package:grade_protector/screen/scroll_page.dart';

class Home_page extends StatefulWidget {
  @override
  _Home_pageState createState() => _Home_pageState();
}

class _Home_pageState extends State<Home_page> {
  Color mint=Use_Colors().get_mint_colors();
  Color r_color = Use_Colors().get_R_colors();
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return MaterialApp(
      home:  Scaffold(
        backgroundColor: r_color,
        appBar: AppBar(
          backgroundColor: mint,
          elevation: 0,
          leading: IconButton(
            color: Colors.black,
            icon: Icon(Icons.arrow_back_ios),
            onPressed: (){
              Navigator.of(context).pop();
            },
          ),
        ),
        body: Column(
          children: [
            Container(
              height: size.height*0.26,
                color: r_color,
                child: Stack(
                  children: [
                    Container(
                      height: size.height *0.2-10,
                      decoration: BoxDecoration(
                        color: mint,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(123),
                        )
                      ),
                    ),
                    Positioned(
                      bottom: 20,
                        left: size.width*0.36,
                        child: Container(
                          height: 130,
                          width: 130,
                          decoration: BoxDecoration(
                             color: Colors.white,
                            borderRadius: BorderRadius.circular(360)
                          ),
                        ))
                  ],
                )),
            Flexible(
                flex: 6,
                child: ListView.separated(
                  padding: EdgeInsets.only(right: 20,left: 20,),
                    itemCount: 6,
                    itemBuilder: (BuildContext context,int? index){
                      return Container(
                        height: 100,
                        color: Colors.white,
                        child: Row(
                          children: [
                            Flexible(
                                flex:3,
                                child: Container(
                                  color: r_color,
                                  child: Stack(
                                    children: [
                                      Container(
                                        height: 100,
                                        width: 100,
                                        decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.all(Radius.circular(360))
                                        ),
                                      )
                                    ],
                                  ),
                                  // decoration: BoxDecoration(
                                  //   borderRadius: BorderRadius.all(Radius.circular(360))
                                  // ),
                                )),
                            Flexible(
                                flex:6,
                                child: Container(
                                  //padding: EdgeInsets.only(left: 10),
                                )),
                            Flexible(
                                flex:3,
                                child: Container(
                                  padding: EdgeInsets.only(left: 40),
                                  child: IconButton(
                                    iconSize: 40,
                                    icon: Icon(Icons.arrow_downward,color: r_color,),
                                    onPressed: (){
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(builder: (context) => Scroll_Page()),
                                      );
                                    },
                                  ),
                                )),
                          ],
                        ),
                      );
                    },
                  separatorBuilder: (BuildContext context, int index)=> const Divider(),
                )),

          ],
        ),
      ),
    );
  }
}

시작하기는 텍스트버튼을 이용하여 버튼을 클릭할 경우 로그인창이 나오게 만들었습니다.

시작하기버튼을 누르면 로그인 창이 나옵니다.

(동영상 넣는 방법을 몰라서 올리질 못 하네요 ㅠ)

웹 사이트에서 접속하여 강의를 확인하면 되지만 늘 노트북을 들고 다닐 수 없고 너무 불편하다. 또한 LMS앱은 과제와 퀴즈 완료 여부를 지원하지 않아 너무 불편했다.

(그림을 잘 못 그리니 이해부탁합니다,,,)

유연한 곡선을 사용하면 좋을 것 같다. 사실 이미지를 활용하여 로그인 화면을 구상하고 싶어 그려보았다.

로그인 후 메인페이지는 과목을 선택할 수 있고 과목을 선택할 경우 애플마켓처럼 이미지와 액션을 자연스럽게 녹여 구상했다.

이 앱의 컨셉은 이미지를 활용한 액션이다.눈이 즐거운 앱이 더 사용하고 싶게 만들기 때문이다.